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本 书 由 Ext JS 社区 三 位 专家 合力 打造 ， 全 面 
介绍 了 灵活 而 强大 的 Ext JS 框架 。 全 书 不 仅 深入 
浅 出 地 介绍 了 基础 知识 、 工 作 原 理 和 类 系统 ， 更 
结合 完整 的 示例 、 丰 富 的 插图 解读 了 其 核心 组 
件 ， 让 你 仿佛 在 专家 的 亲手 指导 下 学 习 并 实践 。 

通过 学 习 ， 你 将 真正 掌握 这 个 成 熟 的 
JavaScript Web 应 用 框架 ， 用 它 丰 富 而 漂亮 的 UI 
组 件 缩短 开发 周期 ， 构 建 优雅 布局 ， 轻 松 管理 单 
调 乏 味 的 样板 文件 ， 最 大 程度 减少 手工 编码 和 浏 
览 器 兼容 问题 。 更 重要 的 是 ， 你 将 学 会 快速 创建 
和 扩展 桌面 风格 的 Web 应 用 ， 从 而 提升 用 户 体 
验 ， 开 拓 更 为 广阔 的 Ext JS 应 用 前 景 。 


主要 内 容 : 

@ ”Ext JS 的 丰富 特性 ， 包 括 UI 部 件 、 数 据 
存储 、 模 型 、 代 理 等 ; 

用 Ext JS 构建 专业 Web 应 用 ; 

用 模板 消灭 DOM 碎 片 ; 

定制 并 构建 Ext 部 件 ; 

出 色 的 UI 设 计 。 


本 书 适合 任何 想 要 学 习 并 使 用 Ext JS 且 具有 
一 定 的 JavaScript 经 验 的 开发 人 员 阅 读 参考 。 
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“学 习 ExtJS 必 备 。” 
一 一 Loiane Groner， 花 旗 银行 
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本 书 分 三 部 分 ， 基 于 Ext JS 4.0 全 面 介绍 如 何 开发 具有 原生 风格 的 富 桌 面 Web 应 用 ， 辅 以 大 量 示 例 帮 读 





代理 














者 理解 其 组 件 和 容器 。 第 一 部 分 是 基础 知识 ， 讲 解 Ext JS 的 丰富 特性 (包括 UI 部 件 以 及 数据 存储 、 模 型 和 
等 支持 类 )、DOM 操作 、 组 件 和 容器 。 第 二 部 分 全 面 介绍 Ext 





























JS 部 件 的 工作 原理 ， 内 容 涵盖 Ext JS 组 件 、 








布局 管理 器 、 表 单 面板 、 数 据 存储 、 网 格 面板 、 树 形 面 板 、 图 形 图 表 、 直 接 远程 调用 和 拖 放 功 能 。 第 三 部 分 
介绍 Ext JS 类 系统 ， 并 基于 本 书 知识 用 Sencha CMD 和 Ext JS MVC 系统 开发 应 用 ， 不 仅 能 让 你 学 会 Ext JS 
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本 书 适 合 各 水 平 阶段 的 Web 开发 人 员 学 习 参 考 。 
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的 扩展 、 搬 件 ， 以 及 类 加 载 器 )， 还 能 让 你 掌握 构建 和 管理 Web 应 用 的 坚实 理论 。 
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我 在 职业 生涯 中 开始 接触 Sencha 要 追溯 到 2006 年 。 它 就 是 如 今 称 为 Ext JS 的 Sencha 桌 面 


JavaScript 框 架 的 前 身 , 在 当时 顶 多 算是 一 项 实验 。 入 门 后 没 多 久 , 我 就 开始 对 这 个 快速 发 展 的 框 





架 所 提出 的 设计 模式 着 迷 不 已 。 不 过 ， 


人 员 社 区 。 











重要 的 是 , 我 爱 上 了 这 个 苗 壮 成 长 而 又 乐于 回报 的 开发 


受到 这 个 社区 里 很 多 活跃 成 员 的 激励 ,我 决定 自己 也 做 一 份 贡献 , 开始 每 周 花 几 十 个 小 时 回 


答 问题 、 发 帖子 ,并 最 终 发 表 了 教学 视频 。 那 个 时 候 真 的 是 很 有 意思 ， 


模式 。 




















社区 中 涌现 出 了 大 量 设计 


本 书 这 一 版 (初版 于 2010 年 面世 ) 反映 了 ExtJS 4.0 所 引领 的 一 个 桌面 Web 前 端 开 发 的 新 纪 


元 。 这 一 版 介绍 了 一 套 极其 健 朵 





一 套 设 计 非 常 精良 的 寻 





架构 ( Model View Controller，MVC )， 而 且 Ext JS 4.0 有 一 套 强 大 的 





使 用 很 多 年 的 应 用 。 














有 件 系 统 、 数 据 包 、 用 户 界 面 ( User Interface, U 


F 的 类 系统 ,并 提供 了 很 多 扩展 自 JavaScript 的 功能 。 此 外 , 还 有 


I) 和 模型 -视图 -控制 需 











我 们 很 高 兴 与 你 分 享 Ext JS 知识 ， 和 希望 你 能 乐 在 其 中 。 


E 架 ， 可 以 让 你 开发 出 能 


一 一 Jesus Garcia 
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口 Sebastian Sterling 一 一 这 本 书 的 出 版 耗 时 比 我 们 预想 的 要 长 得 多 ,作为 我 们 在 Manning 出 版 
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辛苦 工作 。 我 们 还 要 感谢 Frank Pohlman， 他 在 本 书 出 版 的 最 后 阶段 给 我 很 大 的 帮助 ， 并 
最 终 将 本 书 交付 印 制 。 
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口 Jacob Andresen 
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Ext JS 和 Sencha Cmd 的 更 新 步伐 ， 并 帮助 保证 了 本 书 质量 。 
我 要 向 两 位 最 富 盛 名 的 Ext JS 开发 者 社区 成 员 、 最 了 不 起 的 人 物 致 以 最 诚挚 的 谢意 ， 他 们 就 
是 本 书 的 合 著者 Jesus Garcia 和 Jacob Andresen。 他 们 是 我 完美 的 队友 ， 不 知 疲倦 地 引领 着 本 书 的 
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Jacob Andresen 


首先 ， 我 要 感谢 Jesus Garcia 让 我 参与 本 书 的 写作 。 撰 写本 书 不 仅 让 我 有 机 会 学 习 写 作 技 巧 ， 
而 且 得 以 了 解 本 书 中 有 关 技 术 细 节 的 始末 。 我 还 想 感 谢 Grgur Grisogono 为 本 书 所 付出 的 心血 ， 以 
及 他 在 国际 Sencha 开 发 者 社区 中 所 做 的 工作 。 

说 到 开发 者 社区 ， 当 然 少 不 了 来 自 斯 堪 的 纳 维 亚 的 Mats Bryntse 、Fredric Berling 和 Emil 
Pennlov， 感 谢 他 们 带 给 我 的 那些 美好 时 光 。 

最 重要 的 是 ， 感 谢 我 的 妻子 Anita， 感 谢 她 对 我 长 久 以 来 彻夜 编程 的 理解 与 支持 。 



































关于 本 书 








本 书 旨 在 向 读者 介绍 灵活 而 强大 的 桌面 框架 Ext JS。 本 书 将 详细 介绍 这 一 框架 的 基础 知识 ， 
以 及 如 何 使 用 Sencha Cmd 开 发 和 部 署 成 品 应 用 。 通 读本 书 ,你 应 该 可 以 开发 出 健壮 的 桌面 Web 应 
用 ， 并 了 解 Ext JS 4.0 的 众多 新 特性 。 


目标 读者 


本 书 将 向 开发 人 员 讲 解 如 何 利用 ExtJS 创 建 具 有 原生 风格 的 富 桌 面 Web 应 用 。 虽然 Ext JS 被 主 
题 化 和 高 度 定制 ， 但 本 书面 向 那些 在 规范 实施 中 主要 从 事 编程 工作 的 人 员 。 

我 们 假定 你 对 网 站 与 Web 服 务 器 之 间 如 何 交 互 已 有 了 初步 的 了 解 。 想 要 最 有 效 地 编写 健壮 的 
响应 式 应 用 , 你 需要 拥有 扎实 的 技术 背景 , 掌握 诸如 HTML、CSS、JavaScript 和 JSON 之 类 的 核心 
技术 ; 我 们 只 会 在 第 13 章 详细 介绍 这 些 核心 技术 , 并 在 那里 探讨 JavaScript 的 原型 继承 ( 它 是 Ext JS 
类 系统 的 先决 条 件 )。 


软件 要 求 


本 书 将 带 你 查看 很 多 实践 范例 。 为 更 好 地 掌握 这 些 内 容 ， 你 需要 安装 以 下 软件 。 
口 Web 服 务 器 ”我们 推荐 Apache HTTPD 或 Microsoft IIS 。 

D 智能 集成 开发 环境 (IDE) ”我 们 推荐 安装 Webstorm 或 Aptana。 

口 Sencha Cmd 副 本 下 载 网 址 是 www.sencha.com/products/senchacmd/download。 
差不多 就 是 这 些 了 ! 













































































本 书 则 在 引导 你 学 习 ExtJS, 上 且 这 一 版 根据 Ext JS 4.0 更 新 了 很 多 内 容 。 我 们 将 集中 介绍 Ext JS 
提供 的 众多 丰富 特性 ， 包 括 UI 部 件 以 及 数据 存储 、 模 型 和 代理 等 支持 类 。 本 书 共 14 章 。 

第 1 章 简单 介绍 Ext JS 框架 。 我 们 将 全 面 审 视 这 个 框架 ， 探 讨 很 多 常用 的 部 件 。 

第 2 章 旨 在 带 你 试用 这 一 框架 。 我 们 要 好 好 看 看 这 个 框架 是 如 何 交 付 给 你 的 ， 并 辨析 它 的 内 
容 。 我 们 还 要 遍历 DOM ( 文档 对 象 模 型 ) 操作 的 基础 知识 ， 并 且 逐 步 提 高 难度 ， 用 ExtJS 模 板 引 
擎 Template 和 XTemplate 来 泻 染 DOM 中 的 数据 。 
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第 3 章 讲 的 是 component 和 container， 两 者 都 是 Ext JS 用 户 界 面 的 基础 类 。 我 们 将 讨论 组 
件 的 生命 周期 ， 并 介绍 如 何 用 container 和 它 的 工具 方法 来 管理 和 查询 子 组 件 。 

第 4 章 以 第 3 章 的 内 容 为 基础 讨论 核心 UI 组 件 ， 比 如 面板 、 窗 口 、 消 息 框 和 标签 面板 。 这 些 都 
是 扩展 自 container 的 基本 部 件 ， 让 你 的 UI 实现 比 container 所 能 提供 的 更 多 的 功能 。 

第 5 章 包含 ExtJS 提 供 的 多 种 布局 管理 器 , 后 者 用 于 整合 组 件 在 屏幕 上 的 显示 。 这 一 章 将 让 你 
学 会 用 众多 Ext JS 部 件 构建 复杂 的 用 户 界 面 。 

第 6 章 围 绕 表 单 面板 (form panel ) 和 多 种 输入 栏 展开 介绍 。 我 们 将 探讨 如 何 用 输入 栏 设置 验 
证 ， 以 及 如 何 用 表单 面板 加 载 和 保存 数据 。 

第 7 章 集中 讨论 Ext JS 数 据 包 。 你 将 了 解 核心 数据 类 Model、Proxy、Reader 和 和 store, 以 上 
这 些 类 都 是 用 来 给 各 种 UI 组 件 提供 数据 的 。 

第 8 章 在 第 7 章 的 基础 上 讲解 网 格 面板 (grid panel )。 我 们 将 探讨 支持 网 格 面板 的 多 个 类 ， 与 
此 同时 介绍 如 何 使 用 很 多 常见 的 实现 模式 。 

第 9 章 全 面 探讨 Ext JS 树 形 面板 ( tree panel )。 我 们 将 深入 了 解 如 何 使 用 数据 Treestore 类 支 
持 树 形 面 板 部 件 的 分 级 数据 ， 并 在 这 一 章 的 最 后 学 习 通 过 Ext JS 菜单 来 操作 树 数 据 。 

第 10 章 介绍 了 Ext JS 的 图 形 和 图 表 包 。 在 探索 如 何 用 Ext JS Draw API 在 画布 上 绘图 的 同时 ， 
你 将 能 绘制 简单 的 图 形 。 之 后 ， 你 将 学 会 实现 Ext JS 提供 的 众多 图 表 。 

第 11 章 集中 讨论 如 何 用 Ext JS 直接 进行 Web 远 程 调用 。 我 们 将 探索 如 何 才能 把 服务 器 端 逻 辑 
与 客户 端 集成 ， 以 容许 服务 器 代码 控制 向 客户 端 发 出 的 API 调 用 。 

第 12 章 介绍 如 何 用 Ext JS 实现 拖 放 。 我 们 将 介绍 如 何 实现 基本 的 拖 放 类 ， 进 而 深入 探讨 如 何 
用 网 格 、 树 和 数据 视图 来 实现 拖 放 功 能 。 

第 13 章 集中 讨论 Ext JS 类 系统 。 一 开始 我 们 要 介绍 基本 的 JavaScript 原 型 继承 ， 为 你 之 后 开发 
Ext JS 类 打下 基础 。 你 将 了 解 如 何 扩展 Ext JS 组 件 并 开发 该 框架 的 插件 。 

第 14 章 将 带 你 全 程 感受 如 何 用 Sencha CMD 和 Ext JS MVC 系 统 开发 应 用 。 你 将 学 习 设 置 基本 
的 应 用 脚手架 ， 用 MVC 开 发 一 个 应 用 ， 然 后 生成 测试 和 产品 构建 。 


代码 约定 


本 书 中 的 所 有 源 代码 都 使 用 等 宽 字 体 显 示 ， 以 区 别 于 其 他 文本 。 在 很 多 代码 清单 中 , 我 们 都 
对 代码 作 了 注释 以 指出 关键 概念 。 我 们 尝试 对 代码 进行 排版 , 通过 谨慎 添加 换行 符 和 缩 进 使 之 能 
够 契合 书 中 现 有 的 页 面 空 间 。 不 过 有 时 候 很 长 的 代码 行 会 包含 续 行 符 。 


获取 最 新 示例 


我 们 特意 将 本 书 中 的 示例 设计 为 易于 浏览 的 形式 。 每 一 章 都 有 独立 的 文件 夹 ,每 个 示例 都 根 
据 其 所 对 应 的 代码 清单 命名 。 
我 们 将 努力 确保 示例 与 框架 更 新 同步 。 要 获得 示例 的 最 新 版 本 ， 你 可 以 下 载 GitHub 版 本 库 : 


























































































































关于 本 书 3 





https://github.com/ModusCreateOrg/extjs-in-action-examples。 你 还 可 以 在 Manning 出 版 社 网 站 www. 
manning.com/ExtJSinActionSecondEdition 下 载 一 个 包含 代码 示例 的 压缩 文件 "。 


作者 在 线 


购买 了 本 书 英文 版 的 读者 均 可 以 免费 访问 Manning 出 版 社 专门 维护 的 一 个 网 上 论坛 ( Author 
Online )， 并 可 以 发 表 评论 、 提 出 技术 问题 ， 从 作者 和 其 他 论坛 用 户 那里 获得 帮助 。 你 可 以 通过 
网 页 www.manning.com/ExtJSinActionSecondEdition 进 入 和 订阅 该 论坛 。 完 成 注册 后 ,你 可 以 了 解 
如 何 使 用 该 论坛 、 该 论坛 所 能 提供 的 帮助 ， 以 及 论坛 上 的 行为 规范 。 

Manning 出 版 社 承 庄 为 读者 和 作者 提供 一 个 进行 深入 对 话 的 场所 ， 但 不 对 作者 的 参与 程度 做 
要 求 , 他 们 对 于 该 论坛 的 贡献 均 是 出 于 自愿 是 无 报酬 的 。 我们 建议 读者 尽量 向 作者 提 一 些 具有 挑 
战 性 的 问题 ， 让 他 们 保持 参与 的 兴趣 ! 


















































Oz 本 书 中 文 版 的 读者 还 可 注册 iTuring.cn， 至 本 书页 面 免费 下 载 。 一 一 编者 注 
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本 书 封面 上 的 人 物 插图 题 为 “Le voyageur”, 意思 是 “旅行 商 ”。 这 幅 插 图 摘自 Sylvain Maréchal 
编著 并 于 19 世 纪 在 法 国 出 版 的 区 域 着 装 习俗 概要 ( 共 四 卷 )。 这 套 概 要 中 ， 每 一 张 插 图 都 是 全 手 
工 精 细 绘 制 和 着 色 。 其 中 丰富 多 彩 的 插图 生动 地 为 我 们 展现 了 区 区 二 百年 前 这 个 世界 的 城镇 和 地 
区 在 文化 上 与 现在 有 多 大 不 同 。 人 们 说 着 不 同 的 方言 和 语言 , 彼此 隔绝 分 立 , 在 街头 或 者 是 乡间 ， 
人 们 的 衣着 就 清晰 表明 了 他 们 住 在 那里 ， 做 哪 一 行 或 者 身份 地 位 如 何 。 

从 那 之 后 ， 人 们 的 着 装 几 经 更 迭 ， 曾 经 鲜明 的 区 域 间 的 着 装 多 样 性 逐渐 消亡 。 现 在 仅 看 着 装 
已 经 很 难 分 辨 住 在 不 同 大 陆 的 居民 ,更 别 说 是 住 在 不 同城 镇 或 者 地 区 的 人 了 。 或许, 我们 已 经 用 
文化 上 的 多 样 性 换取 了 更 为 多 样 的 个 人 生活 一 一 当然 也 是 为 了 更 丰富 、 更 快速 的 科技 生活 。 

在 这 个 任何 计算 机 书 几 乎 都 是 一 个 模子 的 年 代 ，Manning 用 类 似 这 样 插图 集中 的 作品 把 两 个 
世纪 前 区 域 生活 的 丰富 多 样 性 呈现 在 封面 上 ， 借 此 颂扬 计算 机 行业 的 创造 力 和 首创 精神 。 
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Ext JS 4.0 入 门 





本 书 全 面 地 阐释 并 展示 了 如 何 使 用 强大 的 Ext JS 框架 开发 JavaScript 应 用 。 大 量 的 实用 示例 
将 帮助 你 了 解 它 的 组 件 和 容器 ， 更 重要 的 是 了 解 如 何 综合 使 用 它们 。 

第 1 章 概述 Ext JS 4.0 的 新 特性 。 这 一 章 也 会 讲解 该 框架 的 基本 概念 和 部 件 ， 带 你 编写 “Hello 
World” 应 用 。 第 2 章 阐 述 开 发 任意 Ext JS 应 用 所 需 的 基础 要 素 ， 比 如 初始 化 、DOM 元 素 操作 ， 
以 及 用 Ajax 服 务 器 数据 注入 HTML 乒 段 模 板 。 第 3 章 介绍 组 件 ， 并 介绍 UI 构建 块 的 生命 周期 ， 这 
里 的 UI 构 建 块 包括 视 口 、 面 板 、 沫 单 、 选 项 卡 、 数 据 网 格 、 动 态 表单 、 风 格 化 的 弹出 窗口 ， 以 
及 管理 子 项 的 容器 和 布局 控件 。 

读 完 第 一 部 分 ， 你 将 全 面 了 解 Ext JS 的 工作 原理 ， 并 做 好 探索 Ext JS 框 架 众 多 组 成 部 件 的 
准备 。 
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本 章 内 容 

口 了 解 Ext JS 4.0 的 新 内 容 
口 获取 源 代码 

口 解析 “Hello world” 示 例 








来 设想 一 种 情况 : 你 受命 开发 一 个 应 用 ， 其 中 要 用 到 很 多 典型 的 UI ( 用 户 界面 ) 部 件 ， 比 如 
菜单 、 选 项 卡 、 数 据 网 格 、 动 态 表单 和 风格 化 弹出 式 窗口 。 此 时 需要 一 种 可 以 通过 编程 来 控制 部 
件 位 置 的 东西 ,这 就 意味 着 它 必须 有 布局 控件 。 可 能 你 还 想 要 详细 旦 有 组 织 的 集中 式 文档 ,以 便 
更 轻松 地 学 习 和 掌握 这 一 框架 。 最 后 ， 应 用 必须 外 观 成 熟 ， 能 够 尽快 进入 测试 阶段 ,也 就 是 说 没 
有 太 多 时 间 来 摆弄 HTML 和 CSS。 在 编写 原型 的 第 一 行 代码 之 前 ， 你 必须 先 确 定 开发 应 用 前 端的 
方法 。 你 会 选 什么 呢 ? 

对 市 面 上 常见 的 流行 框架 和 库 做 过 一 番 调查 之 后 ， 你 很 快 就 发 现 它们 全 都 可 以 操控 DOM ， 
但 其 中 只 有 两 个 拥有 成 熟 的 UI 部 件 : 雅虎 用 户 界 面 (Yahool User Interface，YUI ) 和 Ext JS。 

初 帘 YUI， 你 也 许 感 觉 无 需 再 找 其 他 选择 。 尝 试 过 它 的 示例 ， 你 会 发 现 它 的 部 件 看 起 来 很 成 
熟 ,， 但 是 还 达 不 到 专业 品质 ， 也 就 是 说 还 得 修改 CSS。 那 可 不 行 ! 接 下 来 再 看 它 的 文档 。 文 档 是 
集中 式 的 , 技术 上 也 很 准确 , 但 用 户 友好 度 远 远 不 够 。 你 会 发 现 它 的 所 有 深 屏 都 需要 对 应 一 个 方 
法 或 者 一 个 类 。 有 些 类 其 至 因为 左 侧 导航 窗 格 太 小 而 被 裁减 。 

本 章 我 们 要 来 好 好 看 看 ExtJS,， 了 解 一 些 构 成 这 一 框架 的 部 件 。 在 我 们 对 Ext JS 有 一 个 整体 的 
了 解 之 后 ， 可 以 下 载 它 ， 并 用 它 小 试 牛刀 。 



































1.1 初 识 Ext JS 


为 了 开发 一 个 拥有 一 套 富 UI 控 件 的 富 网 络 应 用 ( Rich Internet Application，RIA )， 你 转 用 Ext 
JS， 结 果 发 现 Ext JS 独树一帜 地 提供 了 一 套 丰 富 的 DOM 工 具 和 部 件 。 关 于 示例 的 那 一 页 或 许 会 让 
你 颇 感 兴奋 ， 但 幕后 的 内 容 才 是 最 激动 人 心 的 。Ext JS 带 有 一 整套 的 布局 管理 工具 ， 让 你 全 面 掌 
控 , 可 以 根据 需求 组 织 和 操作 用 户 界面 。 而 在 它 下 面 一 层 有 所 谓 的 组 件 模 型 和 容器 模型 ， 它 们 在 
管理 UI 的 构建 方式 方面 都 起 着 非常 重要 的 作用 。 
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组 件 模型 和 容器 模型 


组 件 模型 和 容器 模型 在 Ext JS 管理 UI 方 面 起 着 重要 作用 ， 也 正 是 Ext JS 区 别 于 其 他 Ajax 库 
和 框架 的 部 分 原因 。 组 件 模 型 决定 了 UTI 部 件 在 所 谓 的 组 件 生命 周期 中 是 如 何 被 实例 化 、 泻 染 和 


销毁 的 。 容 器 模型 控制 着 部 件 如 何 管理 (或 者 容纳 ) 六 
， 也 正 是 我 们 要 在 第 3 章 花 很 多 时 间 讨 论 这 两 个 主题 的 原因 。 


个 关键 部 分 





其 他 子 部 件 。 这 些 是 了 解 Ext JS 框架 的 两 


在 这 个 框架 里 ,几乎 所 有 的 UI 部 件 都 是 高 度 自 定义 的 ,可 以 选择 启用 和 禁用 某 些 特性 、 歼 盖 
某 些 函 数 ， 以 及 使 用 某 些 自 定义 扩展 和 插件 。conjoon 就 是 一 个 充分 利用 Ext JS 的 Web 应 用 示例 。 





图 1-1 展 示 了 conjoon 实 际 使 用 中 的 一 幅 截 图 。 
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用 全 部 浏览 器 视 口 的 UI 的 绝 佳 示例 。 下 载 地 址 : http://conjoon.org/ 


conjoon 是 一 个 开源 个 人 信息 管理 器 ， 可 以 被 视 为 用 Ext JS 开 发 的 Web 应 用 的 典型 示例 。 
用 了 几乎 该 框架 的 所 有 原生 UI 部 件 ， 并 展现 了 该 框 刀 
ToastWindow 之 类 的 自 定义 扩展 集成 得 有 多 好 。 

现在 你 已 经 知道 Ext JS 可 以 用 来 创建 一 个 全 页 Web 应 用 。 显 而 易 见 ， 我 们 可 以 利用 这 
做 很 多 事情 。 你 很 快 就 会 发 现 这 个 框架 非常 庞大 ， 而 且 它 的 API 文 档 很 有 用 。 














它 使 
架 跟 诸如 YouTubePlayer 、LiveGrid 和 





个 框架 











说 到 API 文 档 ， 让 我 们 换 换 口味 ,简单 地 了 解 一 下 它 。 
1.1.1 丰富 的 API 文 档 


使 用 4.0 版 Ext JS 框架 的 API 文 档 是 经 





过 改进 焕然 一 新 的 。 初次 打开 API 文 档 时 , 就 可 以 感觉 到 


4 第 1 章 功夫 在 框架 外 








该 框架 的 精致 。 和 其 他 与 之 竞争 的 框架 不 同 ，Ext JS 的 API 文 档 使 用 它 自 己 的 框架 构建 了 一 个 简 
洁 易 用 的 文档 工具 ， 这 个 工具 通过 Ajax 来 生成 API 文 档 。 

我 们 将 解析 API 的 所 有 特性 ， 并 讨论 这 个 文档 工具 中 用 到 的 一 些 组 件 。 图 1-2 展 示 了 Ext JS 的 
API 文 档 应 用 中 用 到 的 一 些 组 件 。 
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图 1-2 ”Ext JS API 文 档 中 包含 大 量 信息 ， 是 深入 学 习 组 件 和 部 件 的 一 个 好 资源 
这 个 API 文 档 工具 里 充满 了 优质 的 图 形 用 户 界面 ( Graphical User Interface，GUI ) 元 素 , 包 


含 了 6 个 最 常用 的 部 件 ， 包括 文本 输入 框 (text input field )、 树 形 面板 、 标 签 面板 、 主 面板 和 工具 
栏 (toolbar )， 外 加 瞬 入 式 按钮 。 
































浏览 历史 功能 
Ext JS 4.0 的 文档 现在 加 入 了 浏览 历史 功能 。 也 就 是 说 ， 你 可 以 用 浏览 器 的 前 进 和 后 退 按 
钮 在 API 文 档 导 航 栏 之 间 前 后 切换 。 








我 知道 你 肯定 在 想 这 些 是 什么 , 有 什么 用 。 让 我 们 花 点 儿 时 间 讨 论 一 下 这 些 部 件 , 然后 再 继 
续 看 后 面 的 内 容 。 


文本 输入 框 这 个 部 件 封装 了 原生 浏览 器 文本 输入 表单 控件 , 增加 了 诸如 校 验 之 类 的 特性 。 在 API 
文档 中 ， 它 被 用 于 对 树 形 面板 实施 实时 搜索 ， 样 式 可 自 定义 。 我 们 将 在 第 4 章 深 入 介绍 标签 面板 。 

树 形 面板 部 件 以 树 状 形式 展示 分 级 数据 ， 类 似 于 Windows 资 源 管理 器 显示 人 硬盘 文件 夹 一 样 。 
标签 面板 提供 了 一 种 方法 , 可 以 在 用 户 界 面 上 显示 多 个 文档 或 者 组 件 , 但 每 次 只 允许 激活 一 个 文 
档 或 者 组 件 ， 虽 然 都 在 API 文 档 中 ， 但 只 显示 一 个 项 目 。 

主 面板 是 Ext JS 里 的 工作 狂 。 它 很 灵活 ,涵盖 很 多 可 显示 内 容 的 区 域 ， 包 括 停靠 栏 ( dock ) 
和 内 容 体 ( content body )。 停 靠 栏 就 是 通常 放置 诸如 工具 栏 之 类 部 件 的 地 方 ， 而 内 容 体 就 是 通常 
泻 染 内 容 或 者 子 部 件 的 区 域 。 在 API 文 档 中 ， 内 容 体 包含 了 Ext JS 框架 的 文档 。 
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Toolbar 类 提供 了 一 种 展现 按钮 和 菜单 等 常用 UI 组 件 的 方法 , 这 种 情况 下 , 它 也 能 包含 任何 
Ext .form.Field 子 类 。 可 以 把 工具 栏 视 为 一 个 放置 流行 操作 系统 和 桌面 应 用 上 常见 的 “文件 - 
编辑 -查看 ”菜单 的 地 方 。 

API 非 常 易 用 。 要 查看 一 个 文档 ， 只 要 点 击 树 上 的 类 节点 即 可 。 这 将 调用 一 个 Ajax 请 求 ， 取 
得 所 要 的 类 的 文档 。 个 类 文档 都 是 一 个 HTML 片 段 〈 而 非 一 个 完整 的 HTML 页 面 )。 

所 以 文档 非常 详实 。 但 在 快速 应 用 开发 方面 呢 ? Ext JS 能 缩短 开发 周期 吗 ? 


1.1.2 ”用 预制 部 件 快速 开发 


Ext JS 可 以 帮助 你 从 概念 快速 跃升 到 原型 ， 因 为 其 中 所 需 的 很 多 UI 元 素 它 都 已 经 预制 好 以 备 
集成 。 拥 有 这 些 预 制 的 UI 部 件 ,就 不 用 再 去 设计 建造 相应 的 功能 ， 因 此 可 以 节省 大 量 时 间 。 多 数 
情况 下 ，UI 控 件 是 高 度 可 自 定义 的 ， 可 以 根据 应 用 的 需求 进行 修改 。 


1.2 ”你 需要 知道 的 


虽然 用 Ext JS 开发 并 不 一 定 非得 是 Web 应 用 开发 方面 的 专家 ， 但 开发 人 员 在 尝试 用 这 个 框架 
编写 代码 以 前 ， 应 该 有 一 些 这 方面 的 核心 竞争 力 。 

这 类 核心 技能 最 首要 的 ， 就 是 对 于 超 文本 标记 语言 (HTML ) 和 层 县 样式 表 ( CSS ) 的 基本 
理解 。 在 这 些 技术 方面 有 一 定 的 经 验 非常 重要 ， 因 为 跟 任 何其 他 的 JavaScript UI 库 一 样 ，Ext JS 
也 是 用 HIML 和 CSS 来 建造 UI 控 件 和 部 件 的 。 它 的 部 件 看 起 来 或 许 跟 典 型 的 现代 操作 系统 控件 很 
相像 ， 但 最 终 还 是 归结 为 浏览 器 里 的 HTML 和 CSS。 

为 JavaScript 是 Ajax 的 粘 合剂 ， 所 以 需要 学 习 者 有 坚实 的 JavaScript 编 程 基础 。 同 样 ， 你 不 
一 定 非得 是 专家 , 但 应 该 充分 掌握 一 些 关键 概念 , 比如 说 数组 、 引 用 和 作用 域 。 如 果 你 熟悉 对 象 、 
类 和 原型 继承 等 面 回 对 象 JavaScript 基 础 ， 那 就 更 好 了 。 如 果 刚 接触 JavaScript， 那 你 走运 了 。 
JavaScript 几 乎 自 互联 网 诞生 之 初 就 已 存在 。W3Schools.com 是 一 个 初学 JavaScript 的 好 地 方 , 那里 
提供 大 量 的 免费 在 线 教 程 ， 甚 至 还 有 一 些 沙 盒 支持 在 线 把 玩 JavaScript ， 你 可 以 访问 
http://w3schools.com/JS/ 亲身 体验 。 

如 果 受 命 开 发 服务 器 端的 代码 ， 那 就 需要 一 个 Ext JS 的 服务 器 端 解决 方案 进行 交互 以 及 存储 
数据 。 为 保存 数据 ， 你 要 知道 如 何 通过 选择 的 服务 器 端 语言 与 数据 库 或 者 文件 系统 交互 。 

当然 了 ， 可 选 的 解决 方案 范围 非常 广 。 在 这 本 书 里 ,我 们 不 会 拘泥 于 某 一 种 特定 的 语言 ， 而 
是 使 用 http://ExtJSinaction.com 中 的 在 线 资 源 ,在 那里 我 们 已 经 为 你 做 好 了 服务 器 端的 工作 。 这 样 
一 来 ， 你 只 要 专心 学 习 Ext JS 就 好 了 。 在 此 过 程 中 ， 我 们 将 提供 特定 的 API URL 地 址 供 使 用 。 

要 探索 Ext JS， 我 们 首先 带 你 纵览 这 个 框架 的 全 貌 ， 了 解 它 的 功能 类 别 。 


1.3 ”Ext JS 部 件 之 旅 


Ext JS 主 代码 库 诞 生 于 2010 年 初 Sencha Touch 的 开发 期 间 ， 后 者 是 世界 上 第 一 个 HTML5 移 动 
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框架 ( 2010 年 11 月 发 布 )。Sencha Touch 造 就 了 Ext JS 的 支柱 , 也 就 是 “Sencha 平 台 ”( 参见 图 1-3 )， 
它 包含 很 多 Ext JS 和 Sencha Touch 都 使 用 的 关键 特性 。 这 些 共 同 特 性 包括 DOM 和 事件 管理 、 组 件 
模型 ， 以 及 布局 ， 我 们 将 在 这 本 书 的 后 面 章 节 中 详细 介绍 。 


Sencha 平 台 



































图 1-3 Ext JS 4.0 和 Sencha Touch 都 衍生 自 Sencha 平 台 ， 
后 者 是 Sencha 系 列 HTMLS 框 架 的 共同 基础 


ExtJS 框 架 不 但 提供 UI 部 件 , 而 且 提 供 了 一 系列 其 他 特性 。 这些 特性 主要 分 布 在 7 个 主要 的 功 
能 区 : 核心 、UI 组 件 、Web 远 程 调用 、 数 据 服 务 、 拖 放 、 图 形 图 表 和 通用 工具 集 。 图 1-4 中 展现 
了 这 7 个 目标 领域 。 


Web 远 程 调用 Ext JS 核心 到 形 图 表 


图 1-4 ”Ext JS 类 的 7 个 功能 区 


了 解 都 有 哪些 不 同 的 功能 区 以 及 它们 能 做 什么 , 这 可 以 为 开发 应 用 带 来 优势 , 所 以 我 们 要 花 
点 时 间 来 讨论 一 下 。 

口 核心 

第 一 个 特性 集 是 Ext JS 核心 ,， 它 包括 很 多 基本 特性 ， 比 如 Ajax 通信 、DOM 操 作 , 还 有 事件 管 
理 。 所 有 其 他 部 分 都 依赖 于 框架 的 核心 ， 但 核心 并 不 依赖 于 任何 其 他 部 分 。 
口 UI 组 件 
UI 组 件 包含 所 有 与 用 户 有 交互 的 部 件 。 
口 Web 远 程 调用 

Web 远 程 调用 是 用 JavaScript 远 程 执行 在 服务 右上 所 定义 和 暴露 的 方法 调用 的 一 种 手段 , 这 些 
方法 调用 通常 称 为 远程 过 程 调用 ( Remote Procedure Call，RPC )。 对 于 那些 希望 把 服务 器 端 方法 


暴露 给 客户 端 ， 而 又 不 想 为 Ajax 方法 管理 操心 的 开发 环境 来 说 ， 这 很 是 便利 。 这 个 包 称 为 Ext 
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Direct。 

口 数据 服务 

数据 服务 部 分 处 理 所 有 的 数据 需求 ， 包 括 数据 抓 取 、 解 析 以 及 把 信息 载 人 数据 存储 。 利 用 
Ext JS 数 据 服务 类 ,可 以 读 取 数组 、 可 扩展 标记 语言 ( Extensible Markup Language,XML ) 和 JSON。 
JSON 是 一 种 迅速 成 为 客户 端 与 服务 器 通信 标准 的 数据 格式 。 数 据 存储 通常 是 给 UI 组 件 提供 数 
据 。 

口 图 形 图 表 

这 个 全 新 的 工具 包 包 含 了 Ext JS 跨 浏览 絮 绘 图 引擎 ， 它 与 矢量 标记 语言 ( Vector Markup 
Language，VML ) 和 可 缩放 矢量 图 形 ( Scalable Vector Graphic，SVG ) 兼容 。 利 用 图 形 包 (Draw )， 
你 可 以 生成 自己 的 数据 可 视 化 效果 ， 但 它 的 主要 用 途 是 作为 图 表 包 ( Charting ) 的 基础 。 图 表 包 
中 包括 了 很 多 常用 的 图 表 ， 包 括 笛 卡 儿 图 表 (条 形 图 、 折 线 图 、 柱 状 图 等 )、 饼 图 、 区 域 图 、 散 
点 图 和 其 他 图 表 。 
























































试用 JSON! 

虽然 JSON 已 经 存在 了 很 多 年 ， 但 如 果 这 是 第 一 次 听 说 它 的 话 ， 我 们 建议 你 访问 
http:/json.org， 这 是 了 解 这 种 无 所 不 在 的 数据 交换 格式 的 最 佳 信息 源 。 如 果 你 有 兴趣 学 习 在 选 
择 的 服务 器 端 语言 中 实施 JSON, 有 无 数 JSON 实 施 方 法 可 选 , 其 中 大 多 数 都 有 在 线 文档 和 讲解 。 
我 们 建议 用 类 似 “PHPJSON” 之 类 的 关键 词 在 谷歌 上 搜索 了 解 一 下 。 


口 拖 放 
拖 放 就 像 是 Ext JS 内 部 的 一 个 迷你 框架 ， 你 可 以 用 它 在 页 面 上 为 Ext JS 组 件 或 者 任何 HTML 
元 素 赋予 拖 放 功 能 。 它 里 面包 含 了 管理 全 部 拖 放 操 作 的 所 有 必要 构件 。 拖 放 是 一 个 复杂 的 话题 ， 
我 们 将 用 第 13 章 和 第 14 章 两 章 来 探讨 这 个 主题 。 
口 工具 集 
工具 集 部 分 包括 了 那些 可 以 帮 你 更 轻松 实施 某 些 常规 任务 的 绝 佳 工具 类 。 其 中 的 一 个 例子 是 
Ext .util.Format， 它 让 你 可 以 轻松 地 格式 化 或 者 转换 数据 。 男 一 个 很 不 错 的 工具 是 CSS 单 例 
模式 ， 它 让 你 可 以 创建 、 更 新 、 交 换 和 移 除 样式 表 ， 还 可 以 请 求 浏览 器 更 新 它 的 缓存 规则 。 
现在 你 对 Ext JS 框架 主要 的 功能 区 应 该 有 了 一 个 大 体 的 认识 ， 花 点 儿 时 间 来 了 解 一 下 Ext JS 
提供 的 一 些 常用 UI 部 件 吧 。 


1.3.1 容器 和 布局 初探 


虽然 我 们 会 在 第 3 章 详 细 探讨 这 两 个 主题 ， 但 还 是 应 该 先 在 这 里 花 点 儿 时 间 大 致 了 解 一 下 。 
容器 和 布局 这 两 个 术语 在 本 书 中 被 大 量 使 用 ,因此 我 们 和 希望 确保 你 在 继续 阅读 之 后 的 内 容 前 , 至 
少 对 它们 有 一 个 基础 的 认识 。 之 后 ,我 们 将 开始 对 UI 库 可 视 化 组 件 的 探索 。 

口 容器 


容 需 是 可 以 管理 一 个 或 者 更 多 个 子 项 的 部 件 。 一 个 子 项 通常 来 说 , 就 是 由 一 个 容 需 或 者 父 项 
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管理 的 任何 部 件 或 者 组 件 ， 也 就 是 父子 范式 。 你 已 经 在 API 中 看 到 过 这 样 的 情况 。 标 签 面 板 是 一 
个 管理 一 个 或 多 个 子 项 的 容器 ,我 们 可 以 通过 标签 面板 访问 其 子 项 。 请 记 住 这 个 名 词 ， 因 为 当 你 
开始 深入 学 习 使 用 框架 的 UI 部 分 时 会 经 常用 到 它 。 

口 布局 

布局 是 由 一 个 容器 实现 的 ， 以 直观 地 组 织 该 容器 内 容 体 里 的 子 项 。Ext JS 的 库 里 有 多 达 33 个 
布局 ! 好 消息 是 只 需要 学 习 其 中 的 13 个 ， 而 我 们 将 在 第 5 章 中 对 它们 进行 详细 探讨 ， 介 绍 每 个 布 
局 的 具体 情况 。 

现在 你 对 于 容器 和 布局 已 经 大 致 有 了 了 解 ， 让 我 们 来 看 一 些 容 器 的 作用 。 在 图 1-5$ 中 ， 你 可 
以 看 到 container 的 两 个 子 类 Panel 和 window， 它 们 分 别 与 其 他 类 建立 了 父子 关系 ， 这 展 
现 了 container 类 和 多 种 布局 的 强大 功能 。 




















Panel 1 Window 1 兴 


Child Panel 1 Child Panel 1 


Panels can contain children Panels can contain children 


Child Panel 2 Child Panel 2 


父 容器 
子 容器 
Child 1 of Child Panel 2 Child 1 of Child Panel 2 
Tm a grandchild of Panel 1 子 面板 2 的 子 面 板 T'm a grandchild of Window 1 
图 1-5 在 这 里 可 以 看 到 两 个 父 级 Container 
管理 着 一 些 子 项 ， 包 括 骨 套 的 子 项 


图 1-5 里 的 Panel ( 左 ) 和 wingow ( 右 ) 分 别管 理 着 两 个 子 项 。 每 个 父 容器 的 子 面板 1 中 都 包 
含 HTML。 名 为 “ 子 面板 2” 的 子 项 都 使 用 AutoLayout 并 各 管理 着 一 个 子 面板 ，AutoLayout 是 默认 
的 容 需 布局 。 这 种 父子 关系 是 Ext JS 所 有 UI 管理 的 关键 要 素 ， 之 后 将 在 本 书 中 一 再 涉及 和 强调 。 

你 已 经 了 解 了 容器 如 何 管理 子 项 , 以 及 如 何 通过 布局 来 直观 地 组 织 它 们 。 在 掌握 了 这 些 重要 
的 概念 之 后 ， 请 来 看 一 下 其 他 容器 的 运作 。 


1.3.2” 其 他 容器 的 运作 


在 学 习 container 的 过 程 中 , 你 已 经 看 到 了 Panel 和 window 子 类 。 图 1-6 展 示 了 Container 
其 他 的 一 些 常 用 子 类 。 

在 图 1-6 中 ， 可 以 看 到 表单 面板 、 标 签 面板 、 窗 口 、 工 具 栏 和 输入 框 容器 等 部 件 。 表 单 面板 
用 BasicForm 类 封装 输入 框 ， 用 一 个 form 元 素 封装 其 他 子 项 。 所 有 这 些 部 件 都 被 一 个 
Ext .window .Window 实 例 包 含 。 

在 第 6 章 我 们 会 花 一 些 时 间 构 建 一 个 复杂 的 用 户 界面 ， 让 你 更 多 地 了 人 解 表单 面板 。 接 下 来 ， 
我 们 来 看 看 Ext JS 框架 所 提供 的 数据 呈现 部 件 。 
































Panel ( 左 ) 和 windqow ( 右 ) 一 一 
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We 表单 面板 
(Fit 布 局 ) Es (Anchor 布 局 ) 


x 









































Your Name: (First, middle, last): 


Phone numbers: 











Home: Office: 
Mobile: Pager: [= 输入 框 容器 

(字段 布局 ) 
Email addresses: 
Email 1: Email 2: 
Physical addresses: 

Home Address Office Address 
Street: 
City: 
State/Province: 标 签 面板 
Postal Code: (Card 布 局 ) 
Country: 
Submit 
(HBox 布 局 ) 





























图 1-6 来 构成 这 个 UI 窗口 的 常用 container 子 类 FormPanel 、TabPane、 


FieldContainer 和 Toolbar 以 及 多 种 布局 。 我 们 将 在 第 6 章 介绍 表单 的 时 
候 构建 这 个 窗口 





























1.3.3 ”数据 绑 定 视图 


你 已 经 了 解 到 ，Ext JS 框架 的 数据 服务 部 分 是 用 来 读 取 和 解析 数据 的 。Ext JS 4.0 有 很 多 绑 定 
数据 存储 的 部 件 ， 称 为 视图 。 你 会 用 到 很 多 视图 ， 其 中 包括 数据 视图 、 网 格 面板 和 树 形 面板 。 如 
果 应 用 程序 需要 用 图 表 ， 那 么 告诉 你 一 个 好 消息 ，Ext JS 框架 里 所 有 图 表 都 被 视 作 视图 并 且 绑 定 
数据 存储 。 图 1-7 是 Ext JS 的 网 格 面板 在 实际 使 用 中 的 一 幅 截 图 。 

新 近 重 构 的 cridPanel 是 Panel 的 一 个 子 类 ,以 类 似 表格 的 格式 呈现 数据 , 但 它 的 功能 经 过 
扩展 远 超 传统 的 表格 ， 提 供 了 可 分 类 、 可 调 尺寸 和 可 移动 列 标题 ， 以 及 像 RowSelectionMode1 
和 cellselectionMode1l 这 样 的 选择 模型 。 你 可 以 随心 所 欲 地 定制 它 的 观感 ， 并 配合 一 个 分 页 
工具 栏 把 大 数据 集 分 割 并 分 页 显示 。 它 包含 了 很 多 特性 和 插件 ， 让 你 可 以 进行 逐 行 或 逐 格 编辑 ， 
以 及 诸如 锁定 一 列 之 类 的 操作 。 图 1-8 中 所 示 的 数据 视图 呈现 了 市 面 上 多 款 不 同 手机 的 照片 和 其 
他 相关 信息 。 
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xX 
Last Name DOB Email 
Avery 08/28/1942 ultrices.a@luctus.org 
Ballard 01/06/1976 sem@infaucibusorci.edu 
Bradshaw 11/09/1974 facilisis.facilisis@Aeneane... 
Callahan 06/22/1949 cursus@vitaemauris.com 
Carrillo 03/14/1988 cursus.Nunc.mauris@vellec... 
Charles 11/16/1973 molestie@convallis.edu 
Chavez 05/17/1970 risus.In.mi@nonlacinia.edu 
Chen 12/22/1975 Sed.congue.elit@pedeNunc... 
Christian 10/27/1960 sollicitudin.orci@enimEtia... 
Cline 11/29/1958 sed.pede@Integertincidunt... 
Colon 06/29/1975 felis.Nulla@convallis.edu 4 
Dillon 1N/N5/1947 auam plementum/Melitelit 工 
图 1-7 ”Ext JS 软件 开发 工具 包 ( Software Development 
Kit，SDK ) Buffered Grid 示 例 中 的 网 格 面板 
mted DataView 
phone price: 
厨 | 医 | 
9 a 
620 BeakBerny 0 ra Peron 500 (1 Revew Xpress 
目 外 & Ueoo Sony C510a SS 数据 视图 
martphone 110 MB Ultra Edition 10.9 Cyber-shot 
上 a 
mn 


图 1-8 数据 视图 在 Ext JS SDK 示 例 中 的 演示 


DataView 类 从 一 个 数据 存储 获取 数据 , 用 一 个 叫 作 xTemplate 的 类 把 它 显 示 在 屏幕 上 , 并 提 
供 了 一 个 简单 的 选择 模型 。Ext JSXTemplate 是 一 个 HTML 片 段 生 成 工具 , 让 你 可 以 创造 一 个 模板 ， 
并 在 里 面 为 数据 元 素 预 留 占 位 符 ， 它 可 以 用 数据 存储 的 独立 记录 填充 ， 也 可 以 在 DOM 上 销毁 。 


























列表 视图 部 件 不 复 存 在 ! 

如 果 你 是 Ext JS 3.0 转 用 Ext JS 4.0， 那 么 可 能 会 奇怪 列表 视图 部 件 哪儿 去 了 。 简 言 之 , 在 
Ext JS 3.0 里 提供 能 进行 更 快 表格 演 染 的 列表 视图 在 Ext JS 4.0 里 被 移 除 了 ， 后 者 转 而 选择 重 构 
网 格 面 板 以 大 幅 提 高 性 能 。 
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网 格 面 板 和 数据 视图 是 在 屏幕 上 显示 数据 的 基本 工具 , 但 它们 有 一 个 很 大 的 限制 , 就 是 只 能 
显示 记录 列表 ， 不 能 显示 分 级 数据 。 这 时 就 需要 树 形 面板 来 补缺 了 。 


1.3.4 “ 梳 繁 叶 茂 ”的 树 形 面 板 


树 形 面板 部 件 在 众多 显示 数据 的 UI 部 件 中 是 一 个 例外 ， 因 为 它 并 非 使 用 数据 存储 中 的 数据 ， 
而 是 通过 使 用 Treestore 类 来 获取 分 级 数据 。 图 1-9 展 示 了 一 个 ExtJS 树 形 面板 部 件 的 示例 。 在 这 
里 ， 树 形 面板 被 用 于 显示 Ext JS 框架 安装 目录 内 的 父子 数据 。 




















» 


Directory Listing 


日 局 Ext JS 
四 app 
DD button 


昌 chart 
出 DD container 
由 辐 core 
日 与 data 
由 记 ] proxy 
由 上 局 reader 
3 writer 
国 Jsonjs 
图 Writerjs 
国 xmljs 
国 AbstractStorejs 
国 ArrayStorejs 
国 Associationjs 
国 Batchjs A 
国 BelongsToAssociation.js 了 





图 1-9 一 棵 Ext JS 树 ， 它 是 源 自 Ext JS SDK 的 一 个 示例 


在 ExtJS4.0 中 ， 它 已 经 被 彻底 重建 ,现在 是 网 格 面板 的 近亲 。 图 1-10 展 现 了 新 树 形 面板 的 多 
功能 性 。 





x 
Project Teams Lead Hours 
Financial magazine 日 局 ] Project teams Pat Sheridan 

日 局 UVUX ]ayGarcia 

辐 Jay Garcia 40 

国 Pat Sheridan 40 
BServer side PHP Anthony De Moss 

国 Jordan Laramy 40 
日 忆 Database Architecture Nury Sword 

是 TeD 40 
UI Development Jay Garcia 

国 cemal Can Efe 80 

国 Asim safa 80 


图 1-10 一 个 有 列 的 树 形 面板 
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在 我 们 讨论 容器 的 时 候 ， 你 已 经 见 过 单行 文本 框 (textfield ) 了 。 接 下 来 , 我们 要 看 看 Ext JS 


提供 的 其 他 一 些 输 入 框 。 


1.3.5 ”表单 输入 框 


ExtJS 拥 有 8 种 输入 框 的 控制 板 。 有 像 之 前 已 经 提 到 的 单行 文本 框 这 样 的 简单 输入 框 , 也 有 诸 
如 ComboBox (组 合 框 ) 和 HTML 编 辑 带 之 类 复杂 的 输入 框 。 图 1-11 展 示 了 部 分 现成 可 以 使 用 的 





Ext JS 表 单 输入 框 部 件 。 

















在 图 1-11 中 可 以 看 到 ,部 分 表单 输入 框 看 上 去 很 像 它们 相应 原生 HTML 输 入 框 的 风格 化 版 本 。 
不 过 ， 两 者 的 相似 性 仅 限于 此 。Ext JS 表 单 输入 框 的 功能 远 远 不 止 它们 表面 那样 ! 














日 期 输入 框 


数字 输入 框 Numberfield: 
微调 输入 框 一 Spinnerfield; 


ws field: 
时 问答 人 性 =、 全 
Time field: 

一 ~ 由 














多 行文 本 杠 
数据 显示 区 
单行 文本 框 BN S 


isplay field: Display field value here TextArea field: 


器 


e field: 


<> 《> 


文件 选项 框 —— Pa 
滑动 选择 框 一 Sidefiad: 


io field: 


单 选 框 — 回 
复 选 框 -Tahoma 全 DUAL AS | 和 二 | 辐 


HTML 编 辑 器 


图 1-11 





























显示 在 一 个 封装 窗口 里 的 所 有 现成 可 用 的 表单 元 素 
































每 一 个 Ext JS 输入 框 ( 除 了 HTML 编 辑 器 ) 都 包括 一 套 工具 ， 这 些 工 具 可 以 用 来 实施 诸如 取 
值 赋值 、 标 识 输入 框 为 无 效 、 重 置 ， 以 及 执行 输入 框 校 验 等 操作 。 可 以 通过 正则 表达 式 或 者 自 定 
义 校 验方 法 对 输入 框 进 行 自 定义 校 验 , 能 够 全 盘 掌 控 正 在 输入 表单 中 的 数据 。 输 入 框 可 以 在 数据 
被 输入 的 同时 校 验 数据 ， 向 用 户 提供 实时 反馈 。 























口 单行 文本 框 和 多 行文 本 框 
TextField (单行 文本 框 ) 和 TextArea (多 行文 本 框 ) 类 可 以 被 视 为 对 其 相应 标准 HTML 


输入 框 的 扩展 ， 拥 有 像 校 验 之 类 的 额外 特性 。TextField 类 是 很 多 其 他 复杂 部 件 一 一 包括 
ComboBox (组 合 框 )、Number field ( 数字 输入 框 ) 和 Time field ( 时 间 输 入 框 ) 一 一 的 基础 。 
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口 单 选 框 和 复 选 杠 

跟 单行 文本 框 一 样 ， 单 选 框 和 复 选 框 是 对 原始 HTML 中 单 选 框 和 复 选 框 的 扩展 ,不 过 它们 包 
含 了 Ext JS 元 素 管理 的 所 有 好 处 ， 而 且 有 一 些 便 捷 类 可 以 配合 自动 布局 管理 来 创建 复 选 框 集合 和 
单 选 框 集合 。 图 1-12 展 示 了 一 个 Ext JS 中 如 何 用 复杂 的 布局 来 配置 chneckboxGroup 和 Radio- 
Group 类 的 小 示例 。 





























Checkbox Groups 


Auto Layout: 口 Item 1 M Item 2 OD tem 3 口 Tem 4 口 Item 5 
Multi-Column 口 Item 1 DD Item 3 口 Item5 

Ue MM ttem 2 OD ttem4 

Radio Groups 

Auto Layout: Item 1 Q Item 2 Item 3 Item 4 Item 5 
Multi-Column Item 1 2 Item 3 _ Item5 


(vert. auto-width): Q Item 2 D ttem 4 





图 1-12 一 个 cneckbox ( 复 选 框 集合 ) 和 RadioGroup ( 单 选 框 集合 ) 便捷 类 与 
自动 布局 共同 使 用 的 示例 























口 HTML 编 辑 器 

HTML 编辑 器 是 所 见 即 所 得 ( What You See Is What You Get，WYSIWYG ) 的 ， 就 像 是 多 行 
文本 框 的 增强 版 。HTML 编辑 器 使 用 现 有 的 浏览 器 HTML 编 辑 功能 ， 在 所 有 输入 框 当 中 可 以 被 视 
为 一 个 异类 。 关 于 这 个 输入 框 还 有 很 多 可 以 讨论 的 内 容 ， 我 们 将 在 第 6 章 详 述 。 但 现在 ， 让 我 们 
回 到 comboBox 和 它 的 子 类 TimeFielg。 
口 TriggerField 系 列 的 输入 框 
TriggerField 类 是 负责 在 单行 文本 框 右 侧 显示 一 个 按钮 的 基础 类 。 它 的 子 类 被 分 成 两 组 : 
拾取 絮 和 微调 器 。 拾 取 吕 包含 组 合 框 和 日 期 框 ， 微 调 右 包括 微调 区 和 数字 区 。 

组 合 框 绝对 是 最 复杂 和 可 配置 性 最 强 的 表单 输入 框 。 它 可 以 模拟 传统 的 选项 下 拉 框 , 还 可 以 
用 远程 数据 集 借助 数据 存储 来 设置 。 它 可 以 被 设置 为 自动 完成 用 户 输入 的 文本 ( 也 就 是 所 谓 的 提 
前 键入 )， 并 进行 远程 或 者 本 地 数据 过 滤 。 它 也 可 以 被 设置 为 使 用 你 自己 创建 的 ExtJS XTemplate 
实例 ,在 下 拉 框 区 域内 显示 一 个 自 定 义 列表 ， 也 就 是 所 谓 的 绑 定 列表 〈bound list )。 图 1-13 是 一 
个 自 定义 组 合 框 在 实际 使 用 中 的 示例 ， 正 被 用 于 搜索 Ext JS 论坛 。 
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图 1-13 一 个 自 定义 组 合 杠 ， 其 中 包含 了 一 个 集成 分 
页 工具 栏 ， 在 可 下 载 的 Ext JS 示 例 中 可 见 
这 里 的 组 合 框 在 列表 框 中 显示 网 帖 标题 、 日 期 、 作 者 和 网 帖 片 段 之 类 的 信息 。 因 为 有 些 数据 
集 范 围 非常 大 ， 所 以 它 被 设置 为 使 用 分 页 工具 栏 ， 以 方便 用 户 分 页 浏览 结果 数据 。 
为 组 合 框 的 可 配置 性 很 强 , 我 们 也 可 以 在 结果 数据 集中 包含 图 像 引 用 , 将 其 显示 在 被 泻 染 
的 结果 数据 中 。 
现在 我 们 来 到 了 UI 之 旅 的 最 后 一 站 ， 来 看 一 看 其 他 一 些 通 用 的 UI 组 件 。 


1.3.6 ”其 他 部 件 


有 一 些 很 重要 的 UI 控件 ,虽然 不 属于 主要 组 件 , 但 在 UI 的 大 框架 中 发 挥 着 支持 作用 ,在 图 1-14 
中 可 以 看 到 屏幕 上 展现 了 一 系列 不 同 部 件 的 控制 面板 。 
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图 1-14 ”UI 部 件 和 控件 大 厅 烩 


你 已 经 了 解 到 ExtJS 是 如 何 通过 众多 不 同 的 部 件 完成 工作 的 ,也 知道 可 以 选用 ExtJS 来 打造 一 
个 应 用 程序 ， 而 不 用 碰 一 星 半点 儿 的 HTML。 你 还 从 头 到 尾 浏 览 了 ExtJS 框 架 , 包括 遍历 它 的 UI。 
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目前 讨论 过 的 所 有 内 容 在 ExtJS 3.0 中 都 存在 过 。 现在 , 让 我 们 花 点 儿 时 间 来 了 解 ExtJS 4.0 引 入 的 EE 
新 特性 。 


1.4 ”Ext JS 4.0 的 新 特性 


若 说 Ext JS 4.0 是 JavaScript 框 架 的 一 场 革命 时 ， 我 们 绝 没 有 夸大 其 词 。 这 个 框架 有 很 多 增强 
功能 ， 有 时 候 很 难 把 握 所 有 变化 。 这 主要 是 因为 很 多 改变 之 处 都 发 生 在 表象 层 以 下 ， 位 于 Ext JS 
代码 库 的 最 深 处 ， 你 很 少 会 冒险 尝试 ， 因 为 它们 有 时 候 令 人 费解 地 复杂 。 

接 下 来 ， 我 们 要 看 看 这 个 框架 发 生 的 一 些 最 鲜明 的 转变 。 如 果 有 使 用 3.0 版 的 经 验 ， 你 可 能 
会 奇怪 为 什么 框架 的 尺寸 变 大 了 ， 接 下 来 的 几 节 将 告诉 你 原因 。 


1.4.1 蚜 ! 适 配 层 不 见 了 ! 


通过 使 用 适 配 层 ，ExtJS 2.0 和 ExtJS 3.0 可 以 凌驾 于 jQuery、Prototype 和 YUI 库 之 上 。 而 在 Ext 
JS 4.0 中 ， 再 也 不 是 这 样 了 。 
虽然 得 到 了 从 那些 库 转 到 Ext JS 的 开发 人 员 的 好 评 ， 但 适 配 层 一 直 都 是 争论 的 焦点 ， 原 因 有 
多 个 。 适 配 层 的 最 主要 问题 一 直 都 是 基础 库 的 版 本 会 改变 ， 从 而 导致 Ext JS 产生 漏洞 。 

另 一 个 广为人知 的 问题 是 框架 命名 空间 冲突 。ExtJS 1.0 ~ Ext JS 3.0 通 过 向 函数 、 字 符 串 和 数 
组 原型 中 植 人 方法 来 扩展 JavaScript。 因 为 其 他 库 也 对 类 似 的 方法 名 称 进 行 了 同样 的 操作 ， 所 以 
Ext JS 会 破坏 基础 库 所 做 的 改动 。 

Sencha 开 发 团队 为 防止 与 其 他 库 产 生 此 类 冲突 和 紧张 关系 ,把 上 述 特 性 作为 函数 、 字 符 串 和 
数组 单 例 转移 到 了 Ext .util 命 名 空间 。 做 了 这 些 改变 后 ，Sencha 团 队 决 定 取消 适 配 层 ，i 让 上 Ext JS 
和 其 他 任何 库 一 同 工 作 ， 让 你 可 以 使 用 那些 库 的 任何 版 本 ， 而 不 用 担心 升级 那些 库 会 导致 Ext JS 
代码 出 问题 。 


1.4.2 ”新 的 类 系统 


ExtJS 4.0 配 备 了 一 个 全 新 的 类 系统 ,其 中 包含 诸如 依赖 注入 和 动态 类 加 载 之 类 的 特性 , 在 用 
Ext JS 4.0 编 写 面 向 互联 网 的 RIA 时 必 不 可 少 。 

伴随 动态 类 加 载 而 来 的 是 混入 类 (mixin ) 的 概念 ， 这 是 一 种 允许 多 重 继承 的 现代 面向 对 象 
编程 模式 。 这 使 得 Sencha 开 发 团队 在 开发 这 一 框架 的 时 候 更 具 创 造 力 , 在 强化 功能 的 同时 减少 了 
编码 时 间 ， 有 时 还 能 提高 某 些 类 和 部 件 的 易 用 性 。 























































































































了 解 混入 类 ! 
如 果 你 对 混入 类 这 个 编程 概念 感觉 陌生 ， 下 面 这 篇 文章 可 以 很 好 地 解释 它 : http://en. 
wikipedia.org/wiki/Mixin。 
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新 的 类 系统 虽然 提供 了 很 多 新 特性 ,但 也 带 来 了 代价 , 那 就 是 新 的 模式 。 在 实例 化 或 者 定义 
一 个 类 的 时 候 , 新 的 类 系统 提出 了 与 ExtJS 3.0 大 相 径 庭 的 模式 。 虽 然 这 些 新 模式 可 能 会 加 大 学 习 
Ext JS 4.0 的 难度 ， 但 它们 绝对 会 让 你 在 编写 应 用 代码 时 更 有 创造 性 。 

说 到 类 ，Ext JS 4.0 有 一 个 完全 重 构 的 数据 类 系统 ， 这 就 是 我 们 接 下 来 要 讨论 的 内 容 。 


1.4.3 ”数据 包 


Ext JS 4.0 里 这 个 全 新 的 数据 包 ， 其 根源 可 以 追溯 到 Sencha Touch 一 一 用 诸如 模型 之 类 的 术语 
来 蔡 代 记录 。 不 过 ,ExtJS 4.0 对 数据 包 的 改动 所 带 来 的 功能 和 组 织 性 能 要 远 远 超过 Sencha Touch。 

ExtJS 4.0 数 据 包 中 整合 了 数量 庞大 的 类 , 包括 像 本 地 存储 代理 和 树 状 存储 之 类 的 新 成 员 。 本 
地 存储 代理 允许 数据 使 用 浏览 器 的 本 地 存储 功能 来 存储 和 读 取 , 而 树 状 存储 取代 了 Ext JS 3.0 的 树 
加 载 器 ， 让 你 可 以 用 树 实现 比 以 前 多 得 多 的 功能 。 

数据 包 和 额外 增加 了 一 些 特性 ， 比 如 关联 和 校 验 ， 以 及 经 过 深思 熟 虑 的 功能 性 重组 。 图 1-15 展 
示 了 数据 包 的 特性 和 功能 是 如 何 分 割 和 联系 的 。 虽然 我 们 在 后 面 会 更 详细 地 探讨 这 一 点 , 但 不 妨 
在 此 透露 一 些 细节 以 激 起 你 的 学 习 热 情 。 
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图 1-15 ”Ext JS 4.0 数 据 包 


在 ExtJS 4.0 中 ,模型 可 以 直接 使 用 代理 ， 而 在 之 前 版 本 的 框架 中 则 不 能 。 与 此 类 似 ， 校 验 和 
关联 现在 也 可 以 在 模型 层面 执行 。 
数据 包 有 了 不 少 改 动 ， 而 布局 命名 空间 也 同样 经 历 了 大 幅度 地 重 构 。 


1.4.4 布局 : 代码 大 爆炸 


正如 我 们 之 前 所 讨论 的 ，ExtJS 4.0 拥 有 多 达 33 种 新 的 布局 管理 器 , 但 其 中 只 有 13 种 是 你 需要 
了 解 的 。 这 是 因为 布局 被 划分 为 两 个 主要 功能 区 域 : 组 件 布 局 和 容器 布局 。 
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组 件 布局 和 容器 布局 在 这 个 框架 里 起 到 完全 不 同 的 作用 。 组 件 布局 负责 为 组 件 组 织 HTML， 
而 容 需 布局 负责 管理 子 组 件 的 位 置 和 大 小 。 
既然 我 们 谈 到 了 布局 的 话题 ， 那 就 让 我 们 阐释 一 下 Ext JS 4.0 带 给 表格 的 新 停靠 系统 。 








1.4.5 ”新 停靠 系统 


Ext JS 的 众多 面板 源 自 Sencha Touch， 可 以 把 像 工具 栏 之 类 的 部 件 停靠 在 所 谓 的 内 容 体 区 域 
外 侧 ， 从 而 提高 了 这 一 部 件 的 UI 管理 灵活 性 。 如 图 1-16 所 示 ， 三 个 工具 栏 分 别 停靠 在 一 个 面板 的 
顶部 、 底 部 和 左 侧 。 而 这 在 之 前 版 本 的 Ext JS 中 ， 没 有 容器 和 布局 的 深层 艇 套 是 不 可 能 实现 的 。 
这 一 切 都 是 通过 称 为 Dock 的 组 件 布局 来 实现 的 。 
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图 1-16 演示 Ext JS 面板 的 新 停靠 特性 


虽然 可 以 期 待 充分 利用 Dock 布 局 , 但 如 果 应 用 用 到 下 面 要 讨论 的 网 格 面板 , 也 会 让 你 眼前 


= 


JLoOo 


1.4.6 ”网 格 面板 的 改进 


Sencha 开 发 团队 为 了 开发 像 网 格 面板 这 样 的 特性 简直 不 分 昼夜 地 工作 ， 而 回报 是 可 喜 的 , 尤 
其 是 在 仔细 看 过 从 Ext JS 3.0 到 现在 的 变化 以 后 。 

网 格 面板 的 新 特性 中 包含 所 谓 的 无 限 网 格 (infinite grid )， 使 用 它 可 以 分 页 遍历 大 型 数据 集 ， 
而 不 需要 包含 分 页 工具 栏 。 网 格 面板 的 其 他 新 特性 包括 对 命名 空间 进行 了 重新 组 织 以 更 好 地 给 类 
分 组 (参见 图 1-17 )。 

网 格 部 分 的 代码 被 多 组 代码 分 割 开 来 ， 其 中 包括 列 类 型 、 插 件 和 特性 。 虽 然 aata store 从 
技术 上 来 说 并 不 在 网 格 命名 空间 里 ， 但 它 是 Griq panel 的 一 个 支持 类 ， 所 以 我 把 它 也 放 到 了 图 
1-17 中 。 
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网 格 插 件 























数据 存储 网 格 特性 








图 1-17 网 格 面板 支持 的 功能 区 域 


网 格 包 的 这 种 组 织 水 平 意味 着 在 配置 面板 时 可 以 更 灵活 ， 使 Ext JS 可 以 只 执行 必须 执行 的 代 
码 。 比 如 说 想 允 许 编辑 网 格 单元 ， 只 需 在 网 格 面板 配置 中 包含 CellEditing 插 件 。 同 样 ， 如 果 想 包 
含 拖 放 功 能 的 话 ， 只 需 包 含 拖 放 插 件 。 

其 他 功能 被 移植 到 所 谓 的 特性 命名 空间 ( feature namespace )， 它 跟 插 件 有 些 类 似 , 但 是 有 区 
别 。 我 不 想 在 这 里 因 讨 论 使 用 特性 的 细节 把 情况 搞 乱 ,不 过 有 必要 提出 的 是 , 像 行 分 组 或 者 提供 
数据 汇总 行 之 类 的 网 格 优势 ， 可 以 只 在 你 希望 用 的 时 候 用 。 

正如 你 了 解 到 的 , 网 格 面板 的 有 了 很 大 变动 。 但 变动 大 的 并 不 止 它 一 个 。 接 下 来 我 们 将 看 到 ， 
树 面板 也 同样 发 生 了 一 些 重大 的 变化 。 


1.4.7 ” 树 形 面板 如 今 更 接近 网 格 面板 


Ext JS 树 形 面板 的 代码 在 Ext JS 1.0 到 Ext JS 3.0 版 一 直 都 相对 没有 什么 改动 ， 但 Ext JS 4.0 的 树 
形 面板 的 代码 被 彻底 重 写 。 如 果 给 网 格 面板 和 树 形 面 板 在 之 前 的 Ext JS 版 本 中 的 差异 画 一 个 族谱 
图 的 话 ， 要 我 说 它们 最 多 只 是 第 三 代 堂 表 兄 弟 关 系 。 而 在 Ext JS 4.0 中 ， 它 们 是 兄弟 关系 ! 

如 图 1-18 所 示 ， 网 格 面板 和 树 形 面 板 是 兄弟 关系 ， 因 为 它们 拥有 同一 个 超 类 ， 也 就 是 说 它们 
拥有 相同 的 基础 代码 。 好 消息 是 , 一 旦 你 掌握 了 它们 其 中 之 一 , 那么 另 一 个 学 起 来 就 会 顺利 很 多 。 
网 格 面板 和 树 形 面板 拥有 相同 的 基础 代码 ， 这 意味 着 你 可 以 在 树 视图 中 加 入 列 之 类 的 元 素 。 


Ext.panel.Panel 


Ext.panel. Table 
Ext.grid.Panel Ext.tree.Panel 


图 1-18 ” 树 形 面板 和 网 格 面板 拥有 同一 个 超 类 


也 就 是 说 , 树 形 面板 并 不 包含 网 格 面板 展示 的 很 多 功能 ， 比 如 说 汇总 行 插件 或 者 列 锁定 。 此 
外 ， 树 形 面板 必须 使 用 数据 包 里 的 Treestore 类 来 管理 和 显示 分 级 数据 。 

我 们 刚刚 介绍 了 Ext JS 框 架 自 早期 以 来 一 直 都 有 的 两 个 主要 的 数据 绑 定 视图 。 接 下 来 ， 我 们 
要 面 对 的 是 全 新 的 制图 包 。 
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1.4.8 图 形 和 图 表 


图 表 最 早 是 相对 低调 地 被 引入 ExtJS 3.0 中 的 。 原 因 有 两 个 : 第 一 ， 这 些 图 表 是 根据 YUI 库 重 
新 打包 的 基于 Flash 的 图 表 ; 第 二 ,对 YUI 图 表 包 的 升级 经 常会 拖 到 几 次 版 本 修订 之 后 , 令 开 发 人 
员 颇 感 郁 问 。 

而 在 Ext JS 4.0 中 , YUI 图 表 包 被 放弃 了 , 转 而 分 成 两 大 块 从 头 开始 构建 而 成 。 第 一 大 块 是 Ext 
Draw， 这 是 Ext JS 内 部 的 一 个 迷你 框架 ， 其 设计 源 于 在 RaphaelJS 项 目 中 得 到 的 经 验 。Raphael JS 
是 一 个 运用 矢量 标记 语言 (VML )、 可 伸缩 矢量 图 形 (SVG ) 或 者 画布 (Canvas ) 在 浏览 器 中 绘 
图 的 Sencha 实 验 室 项 目 。 

第 二 大 块 是 图 表 包 , 以 Ext Draw 为 基础 。 新 的 图 表 包 中 包含 了 两 种 新 图 表 : 散 点 图 和 雷达 图 。 
图 1-19 展 示 的 是 雷达 图 (数据 1、 数 据 2、 数 据 3 分 别 以 绿 、 红 、 蓝 三 色 区 分 )。 
























































Octobei 


September La7 i November 





December 
国 数据 1 
January 国 数据 2 
园 数据 3 






p> February 


ra 


June 


May March 


April 
图 1-19 ”Ext JS 包含 了 一 些 不 使 用 Flash 的 新 图 表 
我 们 已 经 讨论 过 UI 部 件 的 很 多 元 素 ， 但 除 此 之 外 还 有 一 些 深 层次 的 内 容 值得 在 此 提 及 。 
1.4.9 新 的 CSS 样 式 架构 


Ext JS 使 用 Sass 让 Sencha 开 发 团队 和 用 户 都 可 以 创建 自 定义 主题 。 这 就 意味 着 如 果 你 想 改变 
整个 配色 方案 ， 懂 Sass 可 以 让 这 一 任务 相对 轻松 地 完成 。 
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进一步 了 解 Sass 

Sass 以 迅雷 不 及 撼 耳 之 势 席卷 祥 式 表 管 理 领 域 ， 颠 履 了 人 们 给 网 页 和 应 用 制定 样式 的 方 
式 。 要 了 解 更 多 关于 这 一 工具 的 情况 ， 请 查阅 《Sass 与 Compass 实 战 》( Sass and Compass in 
Action，Manning 出 版 社 ，2013 )。 


昔 助 自 定义 样式 表 和 部 件 ， 可 以 用 Ext JS 开 发 应 用 。 它 们 需要 某 个 东西 把 它们 联系 在 一 起 ， 
而 在 Ext JS 4.0 中 ，Sencha 就 提供 了 这 样 的 工具 。 





1.4.10 ”新 MVC 架 构 


Ext JS 一 直 缺 乏 的 一 样 东 西 ， 就 是 一 种 使 用 该 框架 开发 应 用 的 可 靠 模式 。 而 在 Ext JS 4.0 里 不 
是 这 样 了 ! 根据 从 Sencha Touch 中 吸取 的 经 验 教 训 ，Ext JS 4.0 配 备 了 一 套 可 靠 的 MVC 架 构 ， 让 你 
可 以 使 用 久 经 考验 的 MVC 模 式 来 开发 代码 。 我 们 将 在 本 书 的 最 后 两 章 详 细 探讨 这 个 问题 。 

ExtJS 4.0 的 新 特性 并 不 局 限于 浏览 器 内 容 。 这 个 框架 也 配备 了 其 他 工具 ,可 以 在 应 用 构建 过 
程 中 使 用 。 


1.4.11 捆绑 打包 工具 


早 些 时 候 , 我 们 了 解 到 Ext JS 4.0 配 备 了 一 个 动态 类 加 载 系 统 。 类 加 载 器 是 一 套 针 对 基于 互联 
网 的 Ext JS 应 用 的 优秀 解决 方案 ， 但 基于 内 联网 的 应 用 对 于 响应 时 间 经 常 有 着 更 高 的 要 求 ， 所 以 
Sencha 现 在 把 它 流行 的 JSBuilder 打 包 压 缩 工具 包括 了 进来 ， 它 就 是 用 这 个 工具 构建 和 打包 Ext JS 
和 Sencha Touch 的 ! 

我 们 花 了 很 多 时 间 了 解 Ext JS 框架 中 的 新 内 容 ， 现 在 是 时 候 下 载 并 开始 使 用 它 了 。 


1.5 下 载 和 配置 


虽然 下 载 Ext JS 是 一 个 简单 的 过 程 , 但 配置 一 个 页 面 使 之 包含 Ext JS， 并 不 像 在 HTML 中 引用 
一 个 文件 那么 简单 。 现 在 你 将 了 解 它 的 配置 、 文 件 夹层 次 结构 ， 以 及 到 底 有 哪些 文件 夹 和 它们 的 
用 处 。 

你 要 做 的 第 一 件 事 是 找到 源 代码 ， 因 此 请 访问 www.sencha.com/products/ExtJS/download/。 下 
载 文件 是 zip 格 式 的 SDK， 大 小 超过 30 MB 。 稍 后 我 会 解释 为 什么 这 个 文件 这 么 大 。 现 在 ， 请 把 文 
件 解 压缩 到 你 处 理 JavaScript 文 件 的 位 置 。 要 想 使 用 Ajax , 并 且 不 用 访问 sencha.com 就 能 查看 文档 ， 
你 需要 一 个 Web 服 务 器 。 我 们 通常 用 自己 电脑 上 本 地 配置 的 Apache， 它 是 免费 和 器 平台 的 ,不 过 
Windows 的 IIS 也 可 以 。 

你 可 能 会 像 我 们 一 样 查看 从 下 载 的 软件 开发 工具 包 zip 文 件 中 解压 缩 出 来 的 文件 大 小 。 如 果 
你 被 看 到 的 大 小 吓 到 了 ， 放 松 点 儿 ， 把 它 装 回去 。 是 的 ,30 MB 以 上 的 大 小 对 一 个 JavaScript 框 架 
来 说 非常 大 。 现 在 ， 让 我 们 先 不 管 大 小 ， 看 看 图 1-20 展 示 的 解压 出 的 内 容 。 
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在 软件 开发 工具 包 里 , 你 可 以 看 到 很 多 内 容 。 之 所 以 有 这 人 么 多 文件 夹 和 文件 , 这 是 因为 下 载 
包 里 包含 整个 代码 库 和 CSS 的 多 份 副 本 。 而 这 么 做 是 为 了 让 你 能 以 自己 认为 合适 的 方式 自由 构建 








由] ext-4.0.1 [一 > 
Name Date Mo... Size 
> 国 build 5/18/11 -- 
| builds S/18/11 -= 
[docs S/18/11 -- 
| examples S/18/11 -- 
> 国 jsbuilder S/18/11 -- 
国 locale 5/18/11 -- 
DD overview S/18/11 -- 
| pkgs S/18/11 =-- 
> 国 resources 5118/11 -- 
国 src 5/18/11 -- 
> 上 welcome S/18/11 -- 
index.html SI/18/11 8 KB 
release-notes.html SI/18/11 303 KB 
_] bootstrap.js S/18/11 4 KB 
ext-all-debug-w-comments.js S/18/11 4.4 MB 
ext-all-debug.js S/18/11 2.4 MB 
ext-all.js 5/18/11 1 MB 
ext-debug.js 5/18/11 750 KB 
ext.js S/18/11 176 KB 
3 license.txt SI/18/11 4 KB 
人 本 | 





图 1-20 ExtJS 软 件 开发 工具 包 内 容 一 览 



































或 者 使 用 Ext JS。 表 1-1 解 释 了 其 中 每 个 文件 夹 各 是 什么 以 及 各 自 的 用 途 。 











表 1-1 Ext JS 软件 开发 工具 包 的 内 容 
文件 来 文件 夹 的 用 途 
build 包含 使 用 JSBuilder 合 并 和 压缩 应 用 程序 代码 所 必需 的 脚本 
builds 包含 ExtJS 框 架 的 三 个 不 同 版 本 。 第 一 个 是 沙 盒 版 , 你 可 以 在 里 面 将 ExtJS 3.0 与 ExtJS 4.0 内 联运 行 ， 


docs、overview、 
welcome 


examples 
jsbuilder 
locale 


pkgs 


resources 


ext*.js 





以 减少 移植 风险 


docs (文档 ) 文 

















。 第 二 个 是 库 的 核心 ， 这 个 核心 包含 DOM 管 理 和 该 框架 里 多 个 不 同 的 工具 。 最 后 
一 个 是 Ext JS foundation， 它 是 Ext JS 框架 的 基础 











件 夹 包含 了 完整 的 API 文 档 ， 而 overview (概览 ) 目录 包含 了 该 




















welcome (欢迎 ) 文件 夹 包含 了 支持 框架 启动 界面 的 必要 资源 ， 双 击 index.html 即 可 打开 


包含 了 所 有 示例 
包含 了 JSBuilder 
包含 45 种 口语 翻 





源 代码 
的 二 进 制 文件 和 源 代码 
译 ， 以 替代 框架 内 的 不 同文 本 

















匡 架 的 简单 介绍 。 





启动 界面 


整个 框架 在 这 里 被 分 解 成 压缩 合并 后 的 几 大 块 ， 以 供 连 接 较 慢 的 浏览 器 使 用 。 它 被 分 解 为 


























foundation、DOM、classes 和 extras。classes 是 目前 为 止 最 大 的 集合 ， 其 中 包含 所 有 的 部 但 





储 代码 ， 而 extras 文 件 夹 包含 





包含 了 CSS、 图 


在 Ext JS 的 发 布 目 录 根 目录 下 有 多 个 不 同 的 ext*.js 文 人 








是 该 文件 的 非 压 





一 个 文件 。 我 们 








像 和 Sass 源 代码 








有 诸如 JSON 和 Ext JS MVC 应 用 等 工具 





F。 要 知道 任何 名 字 里 带 “-debug” 











F 和 数据 存 


的 文件 都 


缩 版 本 。 这 些 文件 可 以 分 为 两 组 ， 第 一 组 是 ext.js 和 ext-debug.js， 这 两 者 包含 了 Ext 
JS 框架 的 基础 。 当 你 想 使 用 ExtJS 类 加 载 器 的 时 候 要 包含 它们 。extrall* 文 件 是 整个 库 文 从 








将 用 ext-all-debug 来 做 练习 





F 打 包 成 的 
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现在 就 让 我 们 来 实际 使 用 Ext JS。 


1.6 ”杀手 一 试 





虽然 在 发 布 目录 里 有 不 少 文件 和 文件 夹 ， 但 只 需 其 中 的 少数 就 能 让 该 框架 在 浏览 器 中 运行 。 





在 这 个 练习 中 将 创建 一 个 Ext .form.Pane 1 实例 它 将 在 一 个 Ext .Window. Window 内 部 
泻 染 。 这 个 表单 面板 将 包含 两 个 文本 输入 框 和 一 个 按钮 ， 按 下 后 可 以 提供 反馈 。 代 码 清单 1-1 展 








示 了 如 何 引 导 程 序 代码 。 
代码 清单 1-1 


<link rel="stylesheet" 


创建 hello_world.html 


type="text/css" 


href="/ExtJS/resources/css/ext-all.css" 


<script type="text/javascript" 


src="/ExtJS/ext-all-debug.js"></script> 
src='hello world.js'> 


<script type="text/javascript" 
</script> 





J 


代码 清单 1-1 包 含 了 一 个 典型 的 唯 Ext JS 设 置 的 HTML 标 记 ， 其 中 包含 了 合并 的 CSS 文 件 
ext-all.css 、 必 和 需 的 JavaScript 文 件 , 以 及 ext-all-debug.js。 最后, 它 还 包含 了 即将 创建 的 hello_world.js 





文件 。 


代码 清单 1-1 用 /ExtJS 作 为 框架 代码 的 绝对 路 径 ， 
它 将 会 包含 你 的 主 JavaScript 代 码 。 





个 指向 hello world.jjs 文 件 的 脚本 标签 ， 














如 果 你 的 路 径 不 同一 定 要 记得 更 改 。 创建 一 




















现在 你 要 分 两 步 创 建 hello_world.js 文 件 。 第 一 步 ， 如 代码 清单 1-2 所 示 , 是 构建 表单 面板 和 它 


相关 的 子 组 件 。 
代码 清单 1-2 ”创建 hello world.js 


Var tpl = Ext.create('Ext.Template', |[ 
'Hello {firstName} {lastName}!', 


J 创建 一 个 Template 


i ' Nice to meet Youl ' 实例 
Var formpanel = Ext.create('Ext.form.Formpanel', { 
itemId : 'formPanel', 配置 表 
frame :EtEUe 单 面板 
layout $anchorr.. 
defaultType : 'textfield', 
defaults 2 芝 
anchor Ou 


labelWidth : 65 
}, 


items 二 
{ 
fieldLabel : 'First name', 
name 'firstName' 
}3 
{ 
fieldLabel : 'Last name', 


name : 'lastName' 


am 


输入 框 
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} 





] ， 


buttons : [ 
{ 
text : 'Submit', 配置 反 
handler : function() { 馈 按 钮 
Var formPpanel = this.up('#formPpanel'), 
vals = formPpanel.getValues(), 
greeting = tpl.apply (vals); 
Ext .Msg.alert ('Hello!', greeting); 
} a 
} 警告 对 话 框 


] 
3 


代码 清单 1-22 包 含 了 配置 一 个 有 两 个 输入 框 和 一 个 按钮 的 表单 面板 所 必需 的 代码 。 首先, 创建 一 
个 Ext .Template@ 实 例 ， 稍 后 将 用 它 来 创建 一 个 动态 对 话 框 的 内 容 主 体 。 接 下 来 ， 继 续 创 建 一 个 
Ext .form.FormPanel@ 实 例 ， 它 包含 两 个 文本 输入 框 合 和 一 个 按钮 @。 按 钮 上 配置 了 一 个 事件 处 
理 程序 ， 用 之 前 配置 的 Template 和 取 自 表单 面板 的 值 来 显示 一 个 Ext .Msg 提 示 对 话 框 。 

“Hello world” 示 例 差不多 完成 了 ， 不 过 表单 还 没有 泻 染 到 屏幕 上 。 为 此 ， 要 调用 
Ext .onReady。 在 代码 清单 1-3 中 ， 需 要 把 窗口 中 的 表单 面板 封装 起 来 以 展现 框架 的 灵活 性 。 


代码 清单 1-3 ”全 部 组 合 在 一 起 


Ext .onReadqy (function() { 
Ou 



































Ext .create('Ext.window.Window', { ct ORE 
height i 
width Do 可 泻 染 窗口 
closable : false, 
title : 'Input needed.', 
border : false, 
layout 和 包含 表 
items : formpanel 单 面板 
}) .show(); 


3 

代码 清单 1-3 中 包含 了 在 一 个 Ext JS 窗 口内 部 演 染 表单 面板 的 代码 。 首 先 ， 它 调用 Ext. 
onReady@， 并 代入 一 个 匿名 函数 ; 当 ExtJS 判 断 浏览 器 已 准备 好 操作 DOM 的 时 候 ， 就 执行 这 个 
函数 。 在 这 个 匿名 函数 内 部 , 创建 了 Ext .window .Window 实 例 @，, 它 包 含 了 FormPanel 实 例 全 。 
图 1-21 展 示 了 带 有 子 表单 面板 的 泻 染 示例 。 




















Input needed. 
First name: 


Last name: 


Submit 





图 1-21 泻 染 表单 面板 的 示例 窗 





也 
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图 1-22 展 示 了 演 染 在 屏幕 上 的 “Hello world” 示 例 。 为 触发 Submit ( 提交 ) 按钮 的 事件 处 理 
程序 ， 要 在 两 个 输入 框 里 输入 数据 ， 然 后 单 击 Submit 按 钮 。 如 果 一 切 操作 都 正确 的 话 ， 应 该 可 以 
看 到 用 在 表单 中 输入 的 数据 生成 的 Ext .Msg 提 示 对 话 框 。 























1 t ded. 
nput neede Hello! x 


First name: ， Anthon 
4 Hello Anthony De Moss! Nice to meet you! 


Last name: De Moss 


Submit OK 





图 1-22 “Hello world” 示 例 的 最 终结 果 


大 功 告 成 ! 你 刚刚 使 用 ExtJS 在 一 个 ExtJS 窗 口内 部 泻 染 了 一 个 有 相关 输入 框 和 一 个 按钮 的 表 
单 面板 。 虽 然 这 个 示例 本 质 上 来 说 很 简单 ， 但 确实 展现 了 Ext JS 的 强大 。 





1.7 ”小结 











在 本 章 中 ， 你 学 会 了 用 Ext JS 构建 健壮 的 Web 应 用 ， 知 道 了 它 相 对 于 市 面 上 其 他 流行 框架 具 
备 的 优势 ， 它 是 唯一 基于 UI， 包 含 像 Component、Container 和 Layout 模 型 这 样 以 UI 为 中 心 的 支持 
类 的 框架 。 

你 探索 了 很 多 该 框架 提供 的 核心 UI 部 件 ， 并 了 解 到 很 多 预制 部 件 有 助 于 提高 程序 开发 效率 。 
我 们 还 讨论 了 Ext JS 4.0 做 出 的 一 些 改 变 ， 比 如 全 新 的 非 Flash 图 表 和 MVC 包 。 

最 后 ， 你 看 到 了 如 何 下 载 Ext JS 框 架 ， 连 同 每 个 独立 的 基础 框架 一 起 设置 该 框架 。 你 创建 了 
一 个 “Hello world” 示 例 ， 它 展示 了 如 何 用 一 个 Ext JS 窗 口 来 演 染 带 按 钮 的 表单 面板 ， 并 可 以 用 
一 些 简单 的 JavaScript 呈 现 一 个 Ext .Msg 提 示 对 话 框 。 

在 接 下 来 的 几 章 中 ， 你 将 由 内 而 外 地 探索 Ext JS 的 工作 机 制 。 这 些 知 识 将 帮助 你 在 创建 结构 
优良 的 UI 时 做 出 最 好 的 决定 ， 并 提高 你 有 效 使 用 该 框架 的 能 力 。 这 将 是 一 次 有 趣 的 旅程 。 
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本 章 内 容 

口 引导 JavaScript 代 三 

口 用 Ext .Element 管 理 DOM 元 素 

口 通过 Ajax 加 载 HIML 片段 

口 在 一 个 HTMI 元素 上 实现 高 亮 效 果 
口 实现 模板 和 XTemplate 











开发 应 用 的 时 候 , 你 可 能 会 通过 类 比 进行 思考 。 比 如 说 ,我 们 喜欢 把 一 个 应 用 的 启动 时 间 控 
制 类 比 航天 飞机 的 发 射 , 后 者 的 时 间 控 制 可 以 决定 发 射 成 败 。 在 处 理 任何 操作 DOM 的 程序 时 ， 
明确 何 时 初始 化 JavaScript 代 码 至 关 重 要 。 本 章 里 ， 你 将 了 解 如 何 用 Ext JS 启 动 自己 的 JavaScript， 
以 确保 应 用 代码 在 每 种 浏览 器 上 都 能 在 恰当 的 时 间 初 始 化 。 然 后 ， 我 们 将 探讨 如 何 使 用 
Ext .Element 操 作 DOM。 

众所周知 ，DOM 操 作 是 网 页 开发 人 员 大 多 数 时 候 受命 编程 的 任务 之 一 。 不 管 是 添加 还 是 移 
除 DOM 元 素 ， 我 敢 肯 定 你 感受 过 用 “ 开 箱 即 用 ”的 JavaScript 方 法 来 履行 这 些 任务 有 多 痛 兰 。 毕 
竟 ，DHTML (Dynamic Hyper Text Makeup Language， 动 态 超 文 本 标记 语言 ) 长 期 以 来 一 直 是 动 
态 网 页 的 核心 技术 。 

我 们 将 审视 Ext JS 的 核心 ， 即 Ext .Element 类 ， 它 是 一 个 健壮 可 靠 的 、 跨 浏览 器 的 DOM 元 
素 管理 套件 。 你 讲学 习 如 何 利用 Ext .Element 对 DOM 添 加 节点 和 移 除 节点 ， 而 且 也 将 看 到 这 会 
让 任务 完成 得 更 轻松 。 

一 旦 熟悉 了 Ext .Element ， 你 将 学 习 如 何 使 用 模板 在 DOM 之 中 生成 HTML 片 段 。 我 们 还 将 
深入 探究 XTemplate 的 使 用 ， 介 绍 如何 用 它 轻松 地 遍历 数据 ， 并 在 同时 插入 行 为 修正 逻辑 。 这 会 
是 很 有 趣 的 一 章 。 在 写 代 码 以 前 ， 请 一 定 先 了 解 一 下 如 何 引 导 启 用 了 Ext JS 的 Web 应 用 。 


2.1 用 Ext JS 启动 代码 


大 多 数 开发 者 从 早期 开始 就 是 这 么 初始 化 Javaseript 的 ， 即 在 要 加 载 的 HTML 页 面 中 给 
<body> 标 签 添 加 一 个 onLoad 属 性 : 
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<body onLoad="initMyApp();"> 


虽然 这 种 调用 JavaScript 的 方法 可 行 , 但 对 于 启用 Ajax 的 Web 2.0 网 站 或 者 应 用 来 说 并 不 理想 ， 
因为 onLoad 代 码 通常 在 不 同 的 浏览 器 上 触发 的 时 间 不 一 样 。 比 如 说 , 有 些 浏览 器 在 DOM 准 备 好 ， 
以 及 所 有 内 容 都 已 被 浏览 器 加 载 泻 染 好 之 后 触发 这 一 方法 。 而 对 于 Web 2.0 而 言 ， 这 不 是 好 事 ， 
因为 代码 通常 偏好 在 DOM 准 备 好 ， 但 还 没有 任何 图 像 加 载 以 前 ， 就 开始 管理 和 操作 DOM 元 素 。 
这 时 你 可 以 实现 触发 时 机 和 性 能 之 间 的 完美 平衡 。 我 们 喜欢 称 之 为 页 面 加载 周 期 中 的 “ 甜 区 ”。 

和 浏览 器 开发 领域 的 很 多 东西 一 样 , 每 个 浏览 器 通常 都 有 一 套 自己 特有 的 方式 , 来 探知 它 的 
DOM 节 点 何 时 可 以 进行 操作 。 

原生 浏览 器 解决 方案 可 以 侦 测 DOM 是 否 就 绪 ， 但 它们 在 不 同 浏览 器 上 的 实现 不 尽 相 同 。 比 
如 说 ，Firefox 和 Opera 触 发 DOMContentLoaded 事 件 。Internet Explorer 要 求 在 文件 中 置 入 一 个 带 
defer 属 性 的 脚本 标签 ， 在 DOM 就 绕 的 时 候 触 发 。WebKit 并 不 触发 事件 ,但 会 把 
document. a 性 设置 为 complete， 所 以 必须 要 执行 一 个 循环 检查 该 属 性 ， 并 触发 
一 个 自 定义 事件 来 通知 代码 DOM 已 就 绪 。 好 家 伙 ， 太 乱 了 ! 

幸运 的 是 有 Ext .onReady， 它 可 以 解决 触发 时 间 问 题 ， 并 作为 启动 应 用 特定 代码 的 基础 。 
Ext JS 通 过 侦 测 代码 在 哪 种 浏览 器 上 执行 ， 以 及 管理 对 DOM 就 绪 状 态 的 侦 测 ,来 实现 跨 浏览 器 兼 
容 ， 在 恰当 的 时 间 执 行 代码 。 
Ext. onReady 是 Ext .EventManager. onDocumentReady 的 一 一 个 引用 ， 并 接受 三 个 参数 : 
调用 的 方法 、 从 中 调用 方法 的 作用 域 ， 以 及 传 给 该 方法 的 任何 选项 。 第 二 个 参数 ， 即 scope， 是 
当 你 调用 一 个 需要 在 特定 作用 域 里 执行 的 初始 化 方法 时 使 用 的 。 

























































































了 解 一 下 作用 域 

很 多 JavaScript 开 发 人 员 在 他 们 职业 生涯 早期 经 常 纠结 于 作用 域 的 概念 ， 而 这 个 概念 是 每 
名 JavaScript 开 发 人 员 都 应 该 掌握 的 。 你 可 以 在 以 下 网 址 找到 学 习 了 解 作 用 域 的 优质 资源 : 
www.digital-web.com/articles/scope in javascript/。 


所 有 基于 Ext JS 的 JavaScript 代 码 都 出 现在 Ext JS 脚 本 的 引入 以 下 ( 以 后 )。 这 种 配置 很 重要 ， 
为 JavaScript 文 件 是 被 同步 请 求 和 加 载 的 。 在 Ext JS 命 名 空间 中 定义 以 前 就 试图 调用 任何 Ext JS 
方法 都 会 导致 异常 ， 代 码 将 载 人 失败 。 这 是 一 个 使 用 Ext .onReady 触 发 Ext JS MessageBox 和 警告 
对 话 框 的 示例 : 









































EXt .onReady (function() { 
EXt .Msg.alert ('Hello', 'The DOM is ready!'); 
De 


在 上 述 的 示例 中 ， 把 一 个 所 谓 的 匿名 函数 传递 给 Ext .onReady 作 为 唯一 参数 ， 当 DOM 做 好 
操作 准备 的 时 候 执 行 该 函数 。 匿 名 函数 中 包含 一 行 调用 Ext JS MessageBox 的 代码 , 如 图 2-1 所 示 。 
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Hello x 


The DOM is ready! 


BRK 


























图 2-1 Ext .onReady 调 用 的 结果 ， 显 示 一 个 Ext .MessageBox 窗 口 


匿名 函数 是 指 那 些 没有 变量 引用 的 函数 ,或 者 在 对 象 中 通过 属性 键 引用 的 函数 。 Ext .onReady 
注册 了 匿名 孔 数 ， 当 内 部 事件 docReadyEvent 被 触发 时 执行 该 函数 。 简 而 言 之 ,一 个 事件 就 像 
是 一 条 通知 某 事 已 发 生 的 信息 。 事件 监听 咒 (listener ) 是 一 个 方法 ,注册 用 于 在 该 事件 发 生 或 触 
发 时 进行 执行 或 调用 。 

当 Ext JS 发 现在 页 面 加 载 周 期 中 执行 匿名 方法 或 者 其 他 已 注册 监听 器 的 最 佳 时 间 时 〈 还 记得 
“ 甜 区 ”了 吧 )， 就 会 触发 这 个 docReadyEvent 事 件 。 如 果 你 觉得 事件 这 个 概念 听 起 来 有 点 让 人 困 
惑 ， 那 也 别 慌 。 事 件 管理 是 一 个 复杂 的 话题 ， 我 们 将 在 第 3 章 讲 到 。 

使 用 Ext .onReagy 的 重要 性 再 怎么 强调 也 不 为 过 ， 所 有 示例 代码 都 必须 要 这 样 载 人 。 在 后 
文中 ， 如 果 Ext .onReady 没 有 在 示例 中 详细 写 明 ， 请 默认 用 它 来 载 和 代码， 并 以 如 下 方式 封装 
示例 代码 : 

Ext .onReady (function() { 

/ /ee 代码 在 此 Siva 

}); 

你 已 经 很 清楚 如 何 用 Ext .onReady 来 载 入 代码， 现在 花 点 儿 时 间 了 解 一 下 Ext .Element 类 。 
这 方面 的 知识 非常 必要 ， 在 框架 中 有 DOM 操 作 的 所 有 地 方 都 会 用 到 。 
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所 有 基于 JavaScript 的 Web 应 用 都 是 围绕 着 一 个 中 心 ， 那 就 是 HTML Element ( 元素 )。 
JavaScript 对 DOM 闻 点 的 可 操作 性 使 你 有 这 个 能 力 和 灵活 性 对 希望 操作 的 DOM 进 行 任何 操作 ,这 
些 操作 包括 添加 、 删 除 、 编 辑 样式 ， 或 者 改变 文件 中 任何 节点 的 内 容 。 通 过 ID 引用 DOM 节 点 的 

var myDiv = document .getElementById('someDivIid'); 

使 用 getElementById 方 法 可 以 执行 一 些 基 本 任务 ， 比 如 更 改 innerHTML，, 或 者 编辑 一 个 
CSS 类 的 样式 并 分 配 这 个 类 。 但 如 果 想 对 节点 进行 更 多 操作 呢 ? 比如 管理 它 的 事件 ， 给 鼠标 击 
键 应 用 一 个 样式 ， 或 者 替换 单个 CSS 类 ， 那 就 必须 管理 自己 编写 的 所 有 代码 并 持续 更 新 ， 以 确 
保 代 码 能 百 分 百 地 路 浏览 器 兼容 。 而 这 是 我 们 最 不 想 在 上 面 多 花 时 间 的 差事 。 幸 好 ，Ext JS 为 你 
代劳 了 。 

2.2.1 框架 的 核心 
让 我 们 来 看 Ext .Element 类 ， 它 被 众多 ExtJS 开 发 人 员 公认 为 是 该 框架 的 核心 ， 因 为 它 在 所 
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有 UI 部 件 中 都 起 到 一 定 的 作用 ， 而 且 通 常 可 以 通过 geti 


Element 类 是 一 个 完整 的 DOM 元 素 管理 套件 ， 
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ExXxt ;] 








可 以 对 DOM 实 施 各 种 操作 ， 并 提供 了 我 们 逐渐 青睐 的 健壮 可 靠 的 UI。 这 套 工具 集 及 其 全 


都 可 以 由 你 ， 即 最 终 开 发 者 运用 。 
因为 它 的 设计 ， 它 的 功能 
相对 方便 地 管理 维度 ， 对 齐 和 坐标 。 你 还 可 以 轻松 地 利 月 





并 非 对 DOM 元 素 的 简单 管理 





1 方法 或 者 el 属性 访问 。 
其 中 包含 了 众多 有 用 的 工具 ， 使 该 框架 
部 功能 








， 而 是 用 于 执行 一 些 复杂 任务 ， 比 如 











动画 ， 享 受 完整 的 事件 管理 ， 其 他 好 处 还 有 很 多 。 





2.2.2 ”首次 使 用 Ext .Element 
glement 很 易于 使 用 ， 而 ] 
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且 可 以 














Ext .1 





些 极 难 的 任务 变 简单 。 要 利用 好 : 


Ajax 更 新 一 个 元 素 , 管理 子 节 点 ,实现 











Ext .Element, 





需要 设置 一 个 基 页 。 如 我 们 在 第 1 章 中 所 讨论 的 , 设置 一 个 页 面 , 在 其 中 包含 Ext JS 和 CSS。 然后 ， 


包含 以 下 CSS 和 HTML。 


<style type="text/css"> 
.myDiv { 
border: 
width: 
height: 
cursor: 
padding: 
margin: 
} 
</style> 
di .Ls di 


lpx soliqd #AAAAAA; 
200px; 

S50 

pointer; 

2 2D% 2 20x 


2X “28K 20x .2x3 


class='myDiv'></div> 





借助 这 段 代码 ， 确 保 了 目标 aiv 标 签 都 有 特定 的 维度 


， 并 设置 了 一 个 边框 





， 在 页 面 上 可 以 清 





晰 地 看 到 它们 ， 从 而 为 这 本 书 中 的 示例 架设 好 了 平台 。 包 含 了 一 个 16 为 'div1' 的 aiv, 之 后 将 


用 它 来 作 定位 。 如 果 正 确 地 设置 了 页 面 ， 风格 化 的 div 应 








展现 了 通用 的 HTML 盒 ， 我 们 将 月 








日 它 来 练习 基本 的 ] 
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该 如 图 2-2 显 示 的 那样 清晰 可 见 。 这 张 图 
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02 | Ext.Element examples OI 

















我 们 的 风格 
化 aiv 元 素 
| 部 甩 Yow 0.908s 有 4 
图 2-2 ”你 的 基本 页 面 ， 已 准备 就 绪 进 行 Ext JS Element 操 作 的 风格 化 div 
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注意 所 有 的 Ext.Element 示 例 代码 都 将 引用 刚刚 设置 的 基 页 。 如 果 有 兴趣 实时 观看 对 DOM 所 
做 的 变更 ， 我 们 建议 你 使 用 Firefox 里 多 行 的 Firebug 文 本 编辑 器 来 编辑 这 些 示例 。 如 果 你 
对 Firebug 不 熟悉 ， 可 以 访问 http://getfirebug.comy/wiki 加 以 了 解 。 或 者 你 也 可 以 把 这 些 示例 
置 入 通用 代码 块 。 只 是 记得 要 使 用 Ext .onReady。 











CSS 中 规定 ,任何 与 类 myDiv 相 关联 的 aiv 都 被 设 定 为 高 35 像 素 和 宽 200 像 素 ， 看 起 来 有 点 奇 
怪 。 让 我 们 把 该 元 素 的 高 度 设 为 200 像 素 ， 使 之 成 为 正方 形 。 





var myDiv1L = Ext.get('divil'); 
myDivl.setHeight (200); 


上 面 这 两 行 代码 的 执行 很 重要 。 第 一 行使 用 Ext . get 方法， 向 它 传递 一 个 为 字符 串 'qiv1' ， 
而 返回 一 个 Ext.Element 类 的 实例 ， 用 变量 myDivi 来 引用 。Ext.get 方 法 用 到 
document .getElementByI9， 并 用 Ext JS 的 元 素 管理 方法 对 其 进行 封装 。 

使 用 新 引用 的 Ext .Element 实 例 myDiv1， 并 调用 其 setHeight 方 法 , 传人 一 个 整数 值 200， 
使 之 框架 高 度 增加 到 200 像 素 。 或 者 ,也 可 以 用 它 的 setwiath 方 法 改变 该 元 素 的 宽度 , 不 过 我 们 
跳 过 这 一 步 来 玩 一 些 更 有 趣 的 。 

“现在 变 成 正方 形 了 。 那 有 什么 了 不 起 ? ”你 可 能 会 说 。 假 设 再 来 改变 一 下 它 的 尺寸 ， 这 一 
次 是 用 setsize 方 法 。 把 wiath 和 height 设 为 350 像 素 。 用 已 经 创建 好 的 引用 变量 myDiv1: 









































myDivl.setSize(350, 350, {duration:1, easing:'bounceOut'}); 

当 执 行 这 一 行 代码 会 如 何 ?” 它 会 生动 地 呈现 弹跳 的 效果 吗 ? 那 样 更 好 ! 

本 质 上 ，setSize 方 法 就 是 setHeight 和 setwiqdth 的 合成 。 通 过 这 个 方法 传人 目标 宽度 和 
高 度 ， 以 及 一 个 有 两 个 属性 duration 和 easing 的 对 象 。 而 第 三 个 属性 ， 如 果 定 义 过 ， 将 使 得 
setSize 方 法 以 动画 形式 呈现 该 元 素 的 尺寸 变化 过 程 。 如 果 不 要 动画 , 那 就 忽略 第 三 个 参数 ,该 
框架 将 立即 变换 尺寸 ， 就 像 设 置 高 度 的 时 候 。 

尺寸 设置 是 用 Element 类 进行 元 素 管理 的 众多 方面 之 一 。Ext .Element 部 分 最 强 的 功能 源 
自 其 对 元 素 CRUD ( 创建 、 读 取 、 更 新 和 删除 ) 全 套 操作 的 易 用 性 。 


2.2.3 创建 子 节点 


JavaScript 的 重要 功能 之 一 是 它 对 于 DOM 的 操作 能 力 ， 这 包含 了 对 DOM 节 点 的 创建 。 
JavaScript 提 供 了 很 多 本 地 方法 来 支持 这 一 功能 。ExtJS 用 Ext .Element 类 合适 地 封装 了 很 多 这 些 
方法 。 让 我 们 来 创建 几 个 子 节 点 玩 玩 。 

要 创建 子 节点 ， 使 用 Element 的 Createchila 方 法 : 







































































var myDiv1L = Ext.get('Qiv1') 
myDiv1L.createchild('chila from a string'); 


这 段 代码 在 目标 aiv 的 innerHTML 上 添加 了 一 个 字符 节点 。 如 果 想 创建 一 个 元 素 呢 ? 易如反掌 








O 
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myDivil.createChild('<div>Element from a string</div>'); 


对 createchild 的 这 种 使 用 可 以 在 div1 的 innerHTML 上 添加 一 个 带 字 符 串 'Element 
from a string' 的 子 div。 我 们 不 喜欢 用 这 种 方式 添加 子 节点 ， 因 为 觉得 这 样 元 素 的 字符 串 表 
现形 式 太 过 凌乱 。Ext JS 通 过 接受 一 个 配置 对 象 而 非 字 符 串 ， 来 解决 这 个 问题 : 








Ud 





myDivil.createChild(t 

ad “dlyy 

html : 'Chilgd from a config object' 
je 


在 这 里 ,使 用 一 个 配置 对 象 创建 一 个 子 元 素 。 指 定 tag 属 性 为 'div' ，html 属 性 为 一 个 字符 
和 。 严 格 来 说 ， 这 个 跟 之 前 用 createchi1ld 来 实现 效果 相同 ， 但 代码 更 整洁 ， 而 且 自 文档 化 。 
如 果 想 插入 柚 套 标签 呢 ?” 通 过 配置 对 象 的 这 个 方法 ， 可 以 轻松 实现 : 




















HR 








myDivil.createChild(t 


tag Cs a 
id :'nestedDiv', 
style :'border:1lpx dashed; padding:5px;', 
children :{ 
tag Ce hla 
html :'...a nested div', 


style :'color:#EE0000; border:1lpx solid' 


ys 

在 这 段 代码 中 , 创建 了 最 后 一 个 子 节点 , 设置 了 id, 应 用 了 一 定 样式 , 还 创建 了 一 个 子 元 素 ， 
该 子 元 素 是 一 个 应 用 更 多 样式 的 div。 图 2-3 展 现 了 对 giv 所 做 的 改变 是 什么 样 。 可 以 看 到 对 
myDiv1 所 做 的 所 有 添加 ， 包括 Firebug 的 实时 DOM 视 图 ， 上 面 显 示 添 加 了 一 个 字符 串 节点 和 三 个 
子 aiv， 其 中 一 个 子 aiv 有 它 自己 的 子 aiv。 
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Child from a string 
Element from a String 
Child from a config object 














a nested div 
i 
计 Inspect Edit : body.ext-gecko < htm 
Console ， HTML | CSS Script DOM Net YSlow Options 


"Es 
Pp <style type="text/css"> 
VW <div id="div1" class="myDiv"> 
Child from a string 
">Element from a string</div> 
">Child from a config object </div> 
" style="border: 1px dashed ; padding: 





Spx;"> 
<div st ye "border: 1px solid ; color: rgb(238, 9, 
0);">...a nested div </div> 

















图 2-3 ”用 myDiv1 .createchilg 所 做 的 元 素 添 加 操作 的 集成 
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如 果 想 在 列表 的 顶端 插入 一 个 子 节 点 ， 就 使 用 便捷 方法 insertFirst， 比 如 这 样 : 


myDivil.insertFirst({ 

tag. - HALVE; 

html] :'Child inserted as node 0 of myDiV1' 
3 


Element .insertFirst 将 总 是 在 位 置 0 插入 一 个 新 元 素 , 即使 在 DOM 结 构 中 并 不 存在 子 元 素 。 
如 果 想 把 一 个 子 节 点 插入 一 个 特定 的 索引 位 置 ， te 文 个 任务 。 
一 需要 做 的 就 是 传人 关于 新 创建 节点 插 和 人 位 置 的 引用 ， 像 这 


myDivil.createChild({ 




















tag. "1: div', 
ek : 'removeMeLater', 
html : 'Child inserted as node 2 of myDiV1' 


}, myDivl.dom.childNodes[3]); 


在 这 段 代 码 中 ， 向 createchild 方 法 中 引入 两 个 参数 。 第 一 个 是 新 创建 DOM 元 素 的 配置 对 象 表 
示 ， 而 第 二 个 是 对 目标 子 节点 的 DOM 引 用 ， 而 该 目标 子 节 点 将 作为 createchila 方 法 搬入 新 创 
建 节点 的 目标 。 请 记 住 为 这 个 新 创建 节点 设置 的 ia， 稍 后 将 会 用 到 。 

注意 ,这 里 用 到 了 myDiv1 .dom.chilgdNodes。 借助 Ext .Element 的 aom 属 性 ,可 以 使 用 所 
有 通用 浏览 器 元 素 管 理 功 能 。 
































注意 Element .dom 属 性 与 document .getElementById() 返 回 DOM 对 象 引 用 相同 。 








图 2-4 展 现 了 插入 的 节点 在 页 面 视 图 中 的 外 观 ， 和 在 Firebug DOM 检 验 工 具 所 呈现 的 DOM 继 
承 关系 中 的 形态 。 可 以 看 到 ， 节 点 检验 功能 运行 正常 。 用 insertFirst 方 法 在 列表 的 顶端 插入 
一 个 新 节点 ， 并 用 createchilg 方 法 在 子 节 点 3 上 方 插入 一 个 节点 。 当 给 子 节点 计数 时 要 始终 牢 
记 ， 从 数字 0 而 不 是 1 开始 计数 。 
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Child inserted as node 0 
Child from a string 

Child inserted as node 2 of 
myDiv1l 

Element from a string 





秀 Inspect Edit ; body < htm 
Console HTML | CS5 Script DOM Net YSlow Options 
VE 
Y <div id="div1" class="myDiv"> 


inserted as node 0 </div> 









inserted as node 2 of myDivl </div> 
nt f as > 






t</div> 





iv styl. order: lpx solid ; colo 
0);">...a nested div</div> 





WN 


图 2-4 ”使 用 一 个 索引 位 置 配合 createchilda 方 法 ， 并 使 用 insertFirst 方 法 ， 进 行 
目标 DOM 元 素 插入 操作 的 结果 
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“添加 ”是 网 页 开发 人 员 经 常用 到 的 操作 。 毕 竞 , 这 就 是 DHTML 的 部 分 意义 所 在 。 但 知道 如 
何 删 除 也 同等 重要 。 让 我 们 来 看 看 如 何 用 Ext .Element 删 除 一 些 子 元 素 。 


2.2.4 删除 子 节 点 


删除 节点 比 添加 节点 要 容易 得 多 ， 所 要 做 的 就 是 用 Ext JS 定 位 该 节点 ， 并 调用 其 remove 方 
法 。 为 了 测试 对 子 节 点 的 删除 ， 首 先 需 要 一 张 干净 可 控 的 页 面 以 供 测试 。 用 以 下 HTML 创 建 一 
个 新 页 面 : 

















<div id='divl' class="myDiv"> 
<div id='childl'<Child 1</div> 
<diyv "Classs"child2" >Chnild'2</ div> 
<div class='child3'>Child 3</div> 
dlv.id= "ehiLldd Senild :4 /dLly 
过 加 VC 二 RTV 

</div> 

细 看 这 段 HTML ， 会 发 现 一 个 ia 为 "aiv1' 的 父 aiv。 它 有 5 个 直接 后 裔 ， 其 中 第 一 个 的 ia 是 
:childq1'。 第 二 和 第 三 个 子 节点 没有 ia， 但 它们 有 CSS 类 ' chil1d2' 和 'childq3'。 第 四 个 子 元 
素 id 是 'chilg94' ， 并 有 一 个 CSS 类 'sameclass'。 类 似 的 ， 它 有 一 个 直接 子 节点 ，id 是 
"nestChilg1", 跟 它 的 父 元 素 拥 有 相同 的 CSS 类 。 aiv1 的 最 后 一 个 子 节点 没有 :ia 也 没有 CSS 类 。 
之 所 以 要 有 这 些 设置 ， 是 因为 要 开始 使 用 CSS 选 择 器 来 定位 ， 或 者 直接 定位 不 同 元 素 的 ia。 

在 添加 子 节点 的 示例 中 , 一 直 都 是 把 父 aiv ( ida='aiv1' ) 封装 在 一 个 Ext .Element 类 里 来 
引用 这 个 父 aiv, 并 使 用 它 的 create 方 法 。 而 要 删除 一 个 子 节点 ,办 法 就 不 一 样 了 , 需要 明确 定 
位 需要 被 删除 的 节点 。 让 我 们 使 用 这 个 新 的 DOM 结 构 ， 来 练习 几 种 实现 方法 。 

从 一 个 已 经 封装 的 DOM 元 素 上 删除 一 个 子 节点 的 第 一 种 实现 方法 。 创 建 一 个 Ext .Element 
的 实例 ， 封 装 aiv1 ， 然 后 用 它 借助 于 一 个 CSS 选 择 器 找到 它 的 第 一 个 子 节点 : 
















































































Var myDiv1 = Ext.get('divl'); 
Var firstChild = myDivil.down('div:first-child'); 
firstChild.remove(); 


在 这 个 示例 中 , 用 Ext . get 创 建 了 一 个 对 aiv1 的 引用 。 然后 用 Element .down 方 法 创建 了 另 
一 个 对 首 个 子 节点 的 引用 , firstchi1lg。 传 一 个 伪 类 选择 器, 这 导致 Ext JS 在 DOM 树 中 的 daiv1 
前 后 询问 第 一 个 子 节点 ， 也 就 是 一 个 aiv， 并 将 其 封装 在 Ext .Element 的 实例 中 。 
Element . down 方法 在 第 一 层 的 DOM 节 点 中 查找 任何 Ext .Element。 正 巧 查找 到 的 元 素 是 
id 为 "childal' 的 aiv。 然 后 调用 firstchild.remove 方 法 ， 从 DOM 中 删除 该 节点 。 

用 选取 器 从 列表 中 删除 最 后 一 个 子 节 点 的 代码 如 下 : 



































Var myDivl = Ext.get('divil'); 
Var lastChild = myDivl.down('div:last-child'); 
lastChild.remove(); 


这 个 示例 跟前 一 个 原理 很 相似 。 最 大 的 差别 是 用 了 选取 器 'div:last-child'， 它 定位 了 
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div1 的 最 后 一 个 childNode， 并 将 其 封装 在 一 个 Ext .Element 的 实例 中 。 在 那 之 后 ， 调 用 
lastchild.remove 方 法 ， 它 就 被 删除 了 。 


注意 CSS 选 择 器 是 在 DOM 中 查找 项 目的 强大 工具 。Ext JS 支持 CSS3 选 择 器 规范 。 如 果 是 刚刚 
接触 CSS 选 择 器 ， 我 们 建议 你 访问 W3C 网 页 (http://mng.bz/0vmd )， 上 面 有 关于 选择 器 的 
大 量 信息 。 


如 果 想 通过 ia 来 定位 一 个 元 素 呢 ? 可 以 用 Ext .get 来 代劳 。 这 一 次 , 不 用 创建 任何 引用 , 而 
是 用 链接 (chaining ) 来 完成 工作 。 








Ext .get ('child4').remove(); 


执行 这 行 代码 可 以 删除 1a 为 'chi1la4' 的 子 节 点 及 其 子 节点 。 始 终 记 住 : 删除 一 个 有 子 节 点 
的 节点 也 将 删除 其 子 节点 。 


注意 如 果 你 想 阅读 更 多 关于 链接 的 信息 , 业内 领先 的 开发 者 Dustin Diaz 在 他 的 网 站 上 有 一 篇 很 
不 错 的 文章 ， 请 访问 : www.dustindiaz.com/javascript-chaining/。 


我 们 要 看 的 最 后 一 项 任务 是 用 Ext .Element 执 行 Ajax 请 求 , 以 从 服务 器 加 载 远程 HTML 片 段 
并 将 它们 注入 DOM。 











2.2.5 配合 Ext .Element 使 用 Ajax 








Ext .Element 类 有 能 力 执行 Ajax 调用 ， 以 取 回 远程 HTML 片 段 ， 并 将 那些 片段 插入 其 
innerHTML。 需 要 先 写 一 个 HTML 代 码 段 来 加 载 它 : 
<div> 
Hello there! This is an HTML fragment. 
<script type="text/javascript"> 
Ext .getBody() .highlight (); 
</script> 
</div> 
在 这 个 HTML 片 段 中 ， 有 一 个 简单 的 aiv， 其 中 含有 一 个 内 嵌 脚 本 标签 ， 执 行 一 个 
Ext .getBodycall 方 法 。 它 使 用 链接 来 执行 该 调用 的 结果 ， 执 行 它 的 highlight 方 法 。 
Ext .getBody 是 一 个 便捷 方法 ,以 获得 对 Ext .Element 封 装 的 document .body 的 引用 。 把 这 个 
文件 存 为 htmlFragment.html。 
然后 ， 要 执行 以 下 代码 段 的 载 入 : 


Ext .getBody().1load({ 
WY : 'htmlFragment .html', 
scripts : true 


> 
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在 这 个 代码 段 中 ， 调 用 Ext .getBody 调 用 执行 结果 的 10ad 方 法 ,传人 一 个 详细 列 明 所 要 访 
问 url (也 就 是 htmlFragment.html 文 件 ) 的 配置 对 象 ， 并 把 scripts 设 置 为 Lrue。 当 执行 这 段 代 
码 ， 会 出 现 什么 样 的 结果 呢 ?” 参 见 图 2-5。 























是 http://ext2play - Ext JS 





*% Loading... 
http://ext2play - Ext JS ... 


Hello there! This is an HTML fragment. 


Done 纪 网 Q OO http://ext2pSy-Extjs… OF 
= :Hello there! This is an HTML fragment. 








Done 





Done 芝 鸯 Yslow 1.037s s3 ox ,4 
图 2-5” 往 文档 主体 中 加 载 一 个 HTML 片 段 


执行 这 个 代码 段 时 ， 可 以 看 到 文档 主体 执行 了 一 个 取 回 htmlFragment.html 文 件 的 Ajax 请 求 。 
在 该 文件 被 取 回 的 同时 , 显示 一 个 加 载 进度 条 。 一 旦 该 请 求 完 成 ', HTML 片 段 就 被 插入 DOM。 然 
后 整个 主体 元 素 显 示 黄 色 高 亮 ， 这 意味 着 JavaScript 得 到 了 执行 。 现 在 已 经 看 到 ， 使 用 Ext . 
Element .1oad 工 具 方法 与 手工 编码 Ext .Ajax.request 调 用 相 比 非常 便捷 。 

就 是 这 样 。 对 DOM 进 行 的 添加 元 素 和 删除 元 素 操作 用 Ext .Element 很 容易 实现 。Ext JS 还 
有 男 一 种 添加 元 素 的 方法 甚至 比 这 还 要 简单 ， 尤 其 是 要 把 可 重复 的 DOM 结 构 置 人 DOM 的 时 候 。 
我 们 接 下 来 要 探讨 Template 和 XxTemplate 实 用 工具 类 。 


2.3 ”使 用 模板 和 XTemplate 


Ext .Template 类 是 一 个 强大 的 核心 工具 , 可 以 用 来 创建 完整 的 DOM 层 级 , 其 中 留 有 空位 以 
备 之 后 用 数据 填充 。 当 定义 了 一 个 模板 时 ， 可 以 用 它 来 复制 一 个 或 者 多 个 预定 义 DOM 结 构 ， 并 
将 数据 填 人 人 空位。 掌握 模板 可 以 帮助 你 掌握 使 用 模板 的 UI 部 件 ， 比 如 网 格 面板 、 数 据 视图 和 
ComboBox ( 组合 框 )。 


2.3.1 使 用 模板 
首先 要 创建 一 个 非常 简单 的 模板 ， 然 后 再 进一步 创建 一 个 复杂 得 多 的 模板 : 






































































































































var myTpl = Ext.create('Ext.Template' , "<div>Hello {0}.</div>"); 
myTpl.append(document .body, ['Marjan']); 

myTpl.append(document .body, ['Michael']); 

myTpl.append(document .body, ['Sebastian']); 

在 这 个 示例 中 ， 创 建 一 个 Ext .Template 的 实例 ， 然 后 传人 一 个 aiv 的 字符 串 表 示 和 一 个 空 

















位 , 空位 用 花 括 号 标示 。 然 后 在 变量 myTrp1 里 存储 一 个 引用 。 再 后 调用 myTp .append， 并 传人 一 
个 目标 元 素 aocument .body， 以 及 用 于 填充 空位 的 数据 ， 这 里 的 数据 碰巧 就 是 一 个 包含 有 姓氏 
的 单元 素数 组 。 
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连续 如 此 操作 三 次 ,三 个 aiv 就 正好 被 添加 进 了 DOM , 每 个 空位 中 都 填充 了 一 个 不 同 的 姓氏 。 
图 2-6 展 现 了 调用 append 后 产生 的 结果 。 


©@ OO http://ext2play - ExtJS in Action Cr 
iHello Marjan. 
iHello Michael. 

IHello Sebastian. 








| -ys Inspect Edit div < body.ext-ge! 'Q 
Console HTML CSS Script DOM Net 


¥ <body class="ext-gecko 
ext-gecko3 ext-mac"> 
<div>Hello Michael. </div> 
<div> Hello Sebastian. </div> 














哪 F 二 -ocoorooogos 


+ 


3 
RR 














图 2-6 用 第 一 个 模板 往 DOM 中 添加 节点 ， 如 Firebug 的 分 解 图 所 示 


可 以 看 到 ， 三 个 div 被 添加 在 文档 主体 上 ， 每 个 都 有 不 同 的 名 字 。 使 用 模板 的 好 处 应 该 很 清 
楚 了 。 只 要 设置 一 次 模板 ， 就 可 以 用 不 同 的 值 把 它 套用 到 DOM 上 。 

在 之 前 的 示例 中 , 空位 都 是 用 花 括 号 括 起 来 的 整数 ， 而 后 传人 单元 素数 组 。 模 板 也 可 以 用 从 
纯 对 象 映射 对 象 的 键 或 值 。 以 下 代码 清单 展现 了 如 何 用 这 种 语法 创建 一 个 模板 。 




















代码 清单 2-1 创建 一 个 复杂 的 模板 


Var ImyTp1l = Ext.create('Ext.Template', | 
'<div style="background-color : {color}; margin:10px;">', 
创建 复杂 模板 


'<b> Name : </b> {name}<br />', 
'<b> Age : </b> {age}<br />', 
"<> DOB. ww </b>, {dobjebr /3 
ve/ div 
1 
编译 模板 以 
myTpl.compile(); 加 快速 度 
myTbpl.append (document .body,{ 
Color :"#E9E9FF", 
name :'John Smith', 
age :20, 添加 模板 到 
dob  :'10/20/89' 文档 主体 


}); 


myTpl.append (document .body,t{ 
Color :"#FFE9E9", 


name :'Naomi White'， 
age 1 
dob OBELL84 
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当 我 们 创建 这 个 复杂 模板 @@ 的 时 候 ， 你 注意 到 的 第 一 件 事 或 许 就 是 传人 了 好 几 个 参数 。 这 
是 因为 在 创建 一 个 模板 时 看 以 制 表 符 分 隔 格式 的 伪 HIML 要 比 看 长 字符 串 容 易 得 多 。ExtJS 开 发 
人 员 喜 欢 这 个 主意 , 所 以 他 们 编写 了 Template 构 造 函 数 来 读 取 所 有 传人 的 参数 , 不 管 有 多 少 个 
参数 。 

在 Template 伪 HTML 中 ， 为 4 个 数据 点 预 留 了 空位 。 第 一 个 是 color ， 将 被 用 来 定义 元 素 背 
景 的 式样 。 其 余 三 个 数据 点 是 name 、age 和 dob， 当 模式 被 添加 上 去 的 时 候 会 直接 显示 出 来 。 
下 一 步 是 编译 @ 模 板 ， 这样 可 以 通过 去 除 上 面 的 正则 表达 式 ， 加 快 模板 合并 数据 和 HTML 片 
段 的 速度 。 对 于 这 两 项 操作 , 严格 来 说 并 不 需要 编译 ， 因 为 根本 看 不 出 速度 上 的 提升 ， 但 对 于 使 
用 众多 模板 的 更 大 应 用 来 说 ,编译 的 好 处 显而易见 。 保险 起 见 , 我 们 总 是 在 实例 化 模板 之 后 就 编 
译 它 们 。 

最 后 ， 进 行 了 两 次 append 调 用 合 ， 并 借 此 传人 引用 元 素 和 一 个 数据 对 象 。 这 次 不 像 第 一 个 
模板 示例 中 那样 传人 一 个 数字 ， 而 是 传人 一 个 数据 对 象 ， 其 中 的 键 与 模板 的 空位 丐 配 。 图 2-7 通 
过 Firebug 中 的 DOM 视 图 展现 了 该 复杂 模板 的 执行 结果 。 
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Name : John Smith 
Age : 20 

DOB : 10/20/89 
Name : Naomi White 
Age : 25 

DOB : 03/17/84 


> Inspect Edit div body.ext-gecko < htm 
Console HTML | CSS Script DOM Net YSlow Options 


VE 


Vv <div style="margin: 10px; background-color: rgb(233, 
233 255 ) "> 


<b> Name : </b> 
John Smith 
<br/> 

<b> Age :</b> 








图 2-7 该 复杂 模板 在 Firebug 的 DOM 视 图 中 的 执行 结果 











使 用 模板 , 可 以 获得 DOM 中 两 个 式样 不 同 的 HTML 结 构 。 可 如 果 有 一 个 对 象 数组 呢 ?” 比 如 
说 ， 如 果 一 个 Ajax 请 求 返 回 一 个 数据 对 象 数 组 ， 而 需要 给 每 个 数据 对 象 应 用 一 个 模板 该 怎么 
办 ? 一 种 解决 方法 是 对 数组 进行 遍历 循环 访问 ， 这 借助 于 通用 的 for 循 环 或 者 更 健壮 的 
Ext .each 工 具 方 法 可 以 轻松 实现 。 我 不 会 采用 这 种 方法 。 我 更 倾向 于 使 用 XTemplate 代 替 ， 它 
让 代码 更 整洁 。 
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2.3.2 ”用 XTemplate 执 行 循环 操作 


XTemplate 严 格 意义 上 说 可 以 被 用 于 单数 据 对 象 ， 但 它 最 有 用 的 地 方 ， 是 当 必须 要 循环 访问 
数组 数据 生成 HTML 片段 的 时 候 ， 用 它 要 方便 得 多 。XTemplate 类 扩展 了 Template 类 ， 并 提供 
了 许多 额外 功能 。 为 了 探讨 XTemplate， 首先 要 创建 一 个 数据 对 象 数组 , 然后 创建 一 个 XTemplate > 
用 来 生成 HTML 片 段 ， 如 果 下 面 的 代码 清单 所 示 。 


代码 清单 2-2 使 用 XTemplate 来 循环 访问 数据 











var tplData = [{ 
Color : "#FFE9E9", 添加 数据 
name : 'Naomi White'， 
age ya 
dob 4 
ars, vl"Jvetta', "Camry', "S2000"] 
yt 
COLOL 3 '"#E9BOFE™ 
name  : 'John Smith', 
age + 
dob vO20089. 
Gars [CLIvie, VAGGordr, “Canry:] 
- 实例 化 新 的 
XTemplate 


Var ImyTp1l = Ext.create('Ext.XTemplate', | 
tt) 
'<div style="background-color:{color}; margin:10px;">', 
'<b> Name :</b> {name}<br />', 
'<b> Age :</b> {age}<br />', 
"<by DOB we/by {dobD}<Br: /> 
LV 
/BL 
] 六; 


Im compile(); 添加 HTML 片 段 

a tplData); ei 

在 代码 清单 2-2 中 ， 首 先 设 置 了 一 个 数据 对 象 数 组 Q@， 它 类 似 于 在 上 个 模板 示例 中 使 用 的 数 
据 对 象 ， 只 是 额外 增加 了 一 个 cars 数 组 ， 在 下 一 个 示例 中 将 会 用 到 。 

接 下 来 ,创建 一 个 xTemplate 实 例 @， 它 的 配置 看 起 来 很 像 之 前 那个 Temp1late， 只 是 用 一 
个 自 定义 tpl 元 素 封装 了 giv 容器， 而 tp1 元 素 带 属性 for ， 并 赋值 为 "." 合 。tp1 标 签 就 像 是 模 
板 的 一 个 逻辑 或 者 行为 修饰 符 , 它 有 两 个 算 符 for 和 if, 用 于 更 改 XTemplate 生 成 HTML 片 段 的 方 
式 。 在 这 里 , 赋值 " . "就 是 指示 XTemplate 在 数组 的 根 节 点 中 循环 查找 传人 它 的 值 , 并 根据 封装 在 
tp1 元 素 内 的 伪 HTML 构 造 HTML 片 段 。 当 查看 泻 染 好 的 HTML 时 ， 不 会 看 到 有 tpl 标 签 浑 染 在 
DOM 上。 采用 这 种 方式 跟 模 板 示 例 的 运行 结果 相同 ， 如 图 2-8 所 示 。 

记 住 ， 这 里 使 用 XTemplate 的 好 处 在 于 不 用 写 代 码 来 循环 访问 对 象 数组 ， 这 种 累 活 只 需要 
让 框架 来 代劳 。XTemplate 的 功能 远 不 止 是 循环 访问 数组 ， 而 这 也 极 大 地 提高 了 它 的 可 用 性 。 
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Name : John Smith 
Age :20 

DOB : 10/20/89 
Name : Naomi White 
Age :25 

DOB : 03/17/84 


Inspect Edit : div < body.ext-gecko < htm 
Console HTML CSS Script DOM Ner YSlow Options 
WM <body class="ext-gecko ext-gecko3 ext-mac"> 
V¥ <div style="margin: 10px; background-color: rgb(233, 


3, 91"> 
<b> Name :</b> 
John Smith 
<br/> 
<b> Age :</b> 
20 
<br/> 
<b> DOB : </b> 
10/20/89 
<br/> 

</div> 





Done 








图 2-8 ”通过 Firebug 的 分 解 DOM 视 图 使 用 XTemplate 的 结果 





2.3.3 XTemplate 的 高 阶 应 用 


可 以 配置 XTemplate， 让 它 循环 访问 数组 内 的 数组 ， 甚 至 还 可 以 有 条 件 逻 辑 。 下 面 这 个 代码 
清单 中 的 示例 将 充分 发 挥 XTemplate 的 一 些 功 能 ， 并 展示 很 多 此 类 高 阶 概念 。 你 对 即将 看 到 的 部 
分 语法 可 能 很 陌生 ， 但 请 不 要 气 包 ， 我 们 将 会 逐一 解释 。 在 这 个 XTemplate 的 高 阶 应 用 中 ， 我 们 
要 用 到 之 前 代码 清单 2-2 中 的 tplData。 


代码 清单 2-3 XTemplate 的 高 阶 应 用 
Var myTpl = Ext.create('Ext.XTemplate', |[ 
Pk 


'<div style="background-color: {color}; margin:10px; 
'<b> Name :</b> {name}<br />', 


'<b> Age :</b> {age}<br />', 循环 访问 cars 
'<b> DOB :</b> {dob}<br />', 数据 


‘by Cars te</bS 
"<tpBl EOS oats"S 


M ， 名 显示 当前 数据 
es Py 


'<tpl if="this.isCamry (values)">', 
'<b> (same car)</b>', 6 执行 this.isCcamry 
ET 方法 
‘it (Xindex < Xeounb) TP 
SD 0 检验 是 否 是 
ser 数组 未 尾 
vo/ Os 
本 
{ 
isCamry : function(car) { 
rat QAr ss "LANEY 0 添加 方法 
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1 


myTpl.compile(); 
myTpl.append (document .body, tplData); 


这 段 对 于 XTemplate 的 使 用 展现 了 好 几 个 高 阶 概念 ， 首 先是 在 数组 内 部 循环 访问 @。 记 住 ， 
for 属 性 指示 XTemplate 循 环 访问 一 个 值 列表 。 在 这 里 ，for 属 性 的 值 是 'cars' ， 不 同 于 第 一 个 
for 属 性 赋 的 值 " ."。 这 个 属性 指示 XTemplate 循 环 访问 这 一 块 仿 HTML 代 码 查 找 每 辆 车 。 记 住 ， 
cars 是 一 个 字符 串 数 组 。 

在 这 个 循环 内 是 一 个 带 " {.}" 的 字符 串 @， 它 指示 XTemplate 把 数组 的 值 赋 给 该 循环 的 当前 
索引 。 简 而 言 之， 一 辆 车 的 名 字 将 会 被 泻 染 在 这 个 位 置 。 

接 下 来 ， 可 以 看 到 一 个 带 有 if 属 性 的 tpl 行 为 修饰 符 人 @， 它 执行 this .iscamry 并 传人 
values。this.isCamry 方 法 是 在 XTemplate 末 尾 处 生成 的 @。 我 们 稍微 再 来 说 它 。if 属 性 更 像 
是 一 个 if 条 件 ， 如 果 条 件 满 足 XTemplate 就 将 后 成 HTML 片段 。 在 这 里 ，this.iscamry 必 须 返 
回 true， 封 装 在 这 个 tp1 标 记 中 的 HTML 片段 才 可 以 生成 。 

values 属 性 是 对 要 循环 访问 的 数组 的 值 的 一 个 内 部 引用 。 因 为 要 循环 访问 一 个 字符 串 数 组 ， 
它 引 用 单个 字符 串 ， 也 就 是 一 辆 车 的 名 字 。 

在 下 一 行 中 ， 强 制 执行 JavaScript 代 码 @。 任 何 被 括 在 花 括 号 和 方 括号 里 的 内 容 
( {[...JScode...]}) 都 将 被 解读 为 通用 JavaScript; 它 可 以 访问 XTemplate 提 供 的 一 些 本 地 变 
量 ,还 可 以 随 着 循环 的 每 一 次 重复 而 改变 。 这 样 ,检查 当天 索引 (xindaex ) 是 否 小 于 数组 ( xcount ) 
里 的 元 素 个 数 ,， 并 返回 一 个 逗号 带 一 个 空格 , 或 者 返回 一 个 空 字 符 串 。 执 行 这 个 检查 用 的 内 联 函 
数 可 以 确保 逗号 被 放 在 车 的 名 字 之 间 。 

最 后 一 个 值得 注意 的 地 方 是 ， 容 纳 iscamry 方 法 的 对 象 人 @。 导 入 一 个 有 一 套 成 员 并 向 
Template 构 造 函 数 传人 参数 的 对 象 ( 或 者 对 对 象 的 引用 )， 将 导致 那些 成 员 被 直接 应 用 于 
remplate 本 身 的 实例 。 这 就 是 为 什么 直接 在 其 中 一 个 tp1 行 为 修饰 符 伪 元 素 的 if 条 件 中 直接 调 
用 this.iscamry。 所 有 这 些 成 员 方 法 都 是 在 它们 被 传人 的 xremplate 实 例 的 作用 域 范围 内 调用 
的 。 这 个 概念 非常 强大 但 也 可 能 有 风险 ,因为 可 能 会 覆盖 一 个 现 有 的 xTemplate 成 员 。 所 以 请 设 
法 让 方法 或 者 属性 具 唯 一 性 。 isCamrvy 方 法 使 用 JavaScript 简 写 检 查 传 人 的 字符 串 ， 也 就 是 car 变 
量 ,， 是 否 是 "camry"， 如 果 是 会 返回 true， 否 则 会 返回 false。 图 2-9 展 现 了 XTemplate 高 阶 示 例 
的 运行 结果 。 
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Name : Naomi White 

Age : 25 

DOB : 03/17/84 

Cars : Jetta, Camry (same car), S2000, M3 
Name : John Smith 

Age : 20 

DOB : 10/20/89 

Cars : Civic, Accord. Camry (same car) 


图 2-9 XTemplate 高 阶 示例 的 运行 结果 
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结果 显示 所 有 行为 注入 的 运行 效果 都 符合 预期 。 所 有 车 都 被 列 出 ,逗号 的 位 置 都 正确 。 可 以 
看 出 强制 JavaScript 注 入 奏效 了 ， 因 为 字符 串 " (same car) "显示 在 了 Camry 名 字 的 右 侧 。 

如 你 所 见 ， 相 比 使 用 Ext .Element 配 合 数据 生成 HTML 片 段 的 通用 DOM 注 和 人 方法， 模板 和 
XTemplatef 有 很 多 好 处 。 我 们 鼓励 你 多 看 看 模板 和 XTemplate 的 API 页 面 ， 了 解 更 多 关于 如 何 使 用 
这 些 工 具 的 细节 和 示例 。 你 下 一 次 接触 模板 将 是 在 你 学 习 如 何 创建 自 定义 ComboBox (组 合 框 ) 
的 时 候 。 




















2.4 小 结 























本 章 中 , 我 们 讨论 了 JavaScript 应 用 逻辑 在 过 去 是 如 何 通过 <bodqy> 元 素 的 onLoad 处 理 程 序 加 
载 的 。 要 记 住 通常 来 说 不 同 的 浏览 器 ， 在 DOM 准 备 好 进行 操作 的 时 候 有 各 自 不 同 的 发 布 方式 ， 
这 会 导致 代码 管理 很 棘手 。 在 学 习 使 用 Ext .onReady 的 过 程 中 ， 你 了 解 到 它 负责 让 不 同 的 浏览 
器 在 恰当 的 时 候 启动 你 的 程序 ， 让 你 可 以 集中 精力 处 理 重要 的 东西 : 应 用 逻辑 。 

然后 你 深入 了 解 了 Ext .Element 类 , 它 封装 了 DOM 节 点 ,并 为 DOM 节 点 提供 了 端 对 端 管理 。 
你 通过 对 元 素 的 增加 和 删除 ， 探 索 了 几 个 针对 DOM 节 点 的 管理 工具 。 所 有 UI 部 件 都 使 用 
Ext .Element ， 这 也 使 之 成 为 使 用 最 多 的 核心 框架 组 件 。 每 个 部 件 的 元 素 都 可 以 通过 公共 的 
getE1l 方 法 ,或 者 私有 的 el 属性 加 以 访问 ,但 前 提 是 它 已 经 被 演 染 过 。 

最 后 , 你 了 解 了 如 何 使 用 Template 类 往 DOM 中 注 和 HTML 片段 , 还 体验 了 XTemplate 的 高 阶 
用 法 ， 学 习 了 如 何 往 模块 定义 本 身 舱 入 行为 修饰 逻辑 ， 并 根据 提供 的 数据 产生 出 结果 。 

在 后 面 ， 你 将 专注 学 习 框架 的 UI， 并 深入 探索 驱动 框架 的 核心 理念 和 模型 。 

























































































组 件 和 容器 








本 章 内 容 

口 了 解 组 件 模 型 和 组 件 生命 周期 
口 探索 Ext JS 容 器 模型 
口 管理 部 件 的 父子 关系 
口 实现 容 吉 模型 工具 方法 




















我 (Jesus ) 还 记得 最 初 使 用 Ext 框 架 的 时 候 通 过 示例 和 阅读 API 文 档 来 进行 学 习 。 当 时 , 我 花 
了 很 多 时 间 来 学 习 一 些 最 重要 的 核心 UI 概念 , 包括 添加 用 户 交互 、 重 用 部 件 以 及 理解 一 个 部 件 如 
何 包含 或 控制 另 一 个 部 件 。 比 如 说 ， 如 何 实现 当 点 击 链接 标签 时 显示 一 个 Ext 窗 口 的 功能 。 当 然 ， 
有 一 种 JavaScript 方 法 是 增加 一 个 事件 处 理 程序 ， 但 我 想 使 用 Ext JS。 同 样 ， 我 需要 知道 如 何 让 部 
件 彼 此 实现 沟通 。 比 如 说 ， 如 何 实 现在 点 击 一 个 网 格 面板 的 一 行 时 ， 重 新 加 载 男 一 个 网 格 面 板 。 
另外 , 再 比如 如 何 动 态 地 往 面 板 上 添加 子 元 素 以 及 动态 地 移 除 子 元 素 ， 如 何在 一 个 基于 类 型 输入 
框 的 表单 面板 内 找到 一 个 特定 的 输入 框 。 

本 章 里 ， 你 将 探索 基础 的 UI 构建 块 一 一 component 类 ， 并 了 解 它 是 如 何 通过 实现 一 个 称 为 
组 件 生命 周期 的 标准 行为 模板 ， 胜 任 所 有 UI 部 件 的 核心 模型 的 。 

我 们 还 将 讨论 container 类 , 并 详细 介绍 部 件 是 如 何 管理 子 元 素 的 。 你 将 了 解 如 何 往 面板 等 
部 件 上 动态 添加 和 移 除 子 元 素 ， 它 们 可 以 用 作 动 态 更 新 UI 的 构建 块 。 


3.1 组 件 模型 


Ext JS 组 件 模型 是 一 个 集中 式 模型 ， 提 供 了 很 多 与 组 件 相关 的 任务 ， 包 括 一 套 称 为 “组 件 生 
命 周 期 ”的 规则 ， 它 决定 了 组 件 如 何 实例 化 、 泻 染 以 及 销毁 。 我 们 将 在 3.2 节 讨论 组 件 生命 周期 。 

所 有 UI 部 件 都 是 Ext .component 的 子 类 , 这 也 就 意味 着 所 有 部 件 都 遵从 该 模型 制定 的 规则 。 
图 3-1 部 分 展示 了 哪些 类 型 的 部 件 是 component 类 的 子 类 。 

了 解 每 一 种 UI 部 件 会 如 何 运行 , 可 以 使 框架 具有 稳定 性 和 可 预测 性 。 组件 模 型 也 支持 类 的 直 
接 实例 化 , 也 就 是 延迟 实例 化 ， 即 所 谓 的 XTypes。 知 道 什么 时 候 该 用 什么 可 以 增强 应 用 的 响应 能 
力 。 本 节 将 讨论 组 件 模 型 的 三 种 基本 特性 。 
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表单 输入 框 





Hm 






































图 3-1 Ext JS 的 component 类 在 该 框架 的 所 有 UI 部 件 中 都 扮演 了 重要 角色 





3.1.1 XType 和 ComponentManager 


Ext 2.0 引 入 了 XType 这 一 全 新 概念 ， 它 允许 组 件 延 迟 实例 化 。XType 可 以 加 速 复杂 用 户 界 面 
的 类 实例 化 ， 并 大 大 提高 代码 的 整洁 程度 。 

简 而 言 之 ，XType 无 非 是 一 个 纯 JavaScript 对 象 ， 它 通常 包含 一 个 xtype 属 性 
符 串 值 标示 该 XType 对 应 的 类 。 以 下 是 一 个 实际 使 用 XType 的 简单 示例 : 























k 中 有 一 个 字 





? 


Y 























Var myPanel = { 

xtype : 'panel', 

height : 100， 

width : 100, 

html -VvHEeLLoOl" 
这 里 的 myPanel 是 一 个 XType 配 置 对 象 ,将 用 于 配置 一 个 Ext .Panel 部 件 。 这 之 所 以 能 行 ,是 
为 几乎 所 有 部 件 都 通过 唯一 的 字符 串 值 和 一 个 对 该 类 的 引用 , 注册 到 Ext .componentMananger 
类 ， 然 后 再 被 引用 为 一 个 XType。 在 该 框架 的 每 个 UI 类 中 ， 你 都 会 找到 一 个 以 ' widget .为 前 缀 的 
alias 声 明 ，ExtJS 类 系统 会 根据 该 前 缀 自动 把 部 件 的 XType 注 册 到 componentMananger。 

以 下 是 为 一 个 自 定义 类 注册 XType 的 代码 : 

Ext .define('MyApp.CustomClass', { 

extend: 'Ext.panel.Panel', 


alias: 'widget.myCustomComponent' 


ye 
一 旦 注册 完成 ， 就 可 以 把 自 定义 组 件 指定 为 一 个 XType: 
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new Ext.Panel({ 

了 ES 

xtype : 'myCustomComponent ' ， 

} 
下 
在 初始 化 一 个 包含 子 元 素 的 可 视 化 组 件 时 ， 它 会 检查 自己 是 否 有 this.items， 并 检查 
this.items 里 是 否 有 XType 的 配置 对 象 。 如 果 找 到 配置 对 象 ， 它 会 尝试 用 component 
Mananger .create 创 建 一 个 该 组 件 的 实例 。 如 果 xtype 属 性 在 配置 对 象 中 没有 定义 ， 则 可 视 化 
组 件 会 在 调用 co ponentManager. create 的 时 候 定 义 它 的 defaultType 属性 。 

这 个 概念 乍 听 上 去 可 能 有 点 令 人 困惑 。 为 了 更 好 地 理解 它 ， 要 用 accordion 布 局 ( 折 县 布局 ) 来 
创建 一 个 包含 两 个 子 元 素 的 窗口 , 其 中 之 一 不 包含 xtype 属 性 。 首先 , 为 两 个 子 元 素 创建 配置 对 象 : 


















































Var panell = { 
xtype : 'panel', 
title : 'Plain Panel', 
html : 'Panel with an xtype specified' 
i 
Var panel2 = { 
title : 'Plain Panel 2'， 
html : 'Panel with <b>no</b> xtype specified' 


请 注意 ，panell1 有 一 个 显 式 xtype 值 'panel' ， 之 后 它 将 被 用 于 创建 一 个 Ext .Panel 的 实 
例 。 对 象 pane11 和 pane12 很 相似 ， 但 它们 有 一 个 明显 的 区 别 : 对 象 pane11 指 定 了 一 个 xtype， 
而 pane12 没 有 。 

接 下 来 创建 窗口 ， 它 要 用 到 这 些 xtype: 








Ext .create('Ext.window.Window',{ 
width: 200, 
height : 150, 
title : 'Accordion window', 
border : false, 
layout : { 
type "aCeordLion", 
animate : true 
ys 
items : [ 
panell, 
panel2 
] 
}) .show(); 


在 实例 化 Ext JS 窗 口 时 ,传人 items， 后 者 是 一 个 引用 数组 ， 包 含 了 对 之 前 创建 的 配置 对 象 
的 引用 。 泻 染 好 的 窗口 应 该 像 图 3-2 这 样 。 点 击 一 个 折 生 面板 将 使 它 展 开 ， 并 折 闭 所 有 其 他 展开 
的 面板 ， 而 点 击 展开 的 面板 将 使 它 折 县 。 









































Accordion window X | | Accordion window x 
Plain Panel Plain Panel + 
Panel with an xtype specified Plain Panel 2 
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Plain Panel 2 十 




















图 3-2 XType 示 例 的 运行 结果 : 一 个 Ext JS 窗口 ， 其 中 有 两 个 根据 XType 
配置 对 象 生成 的 子 面板 


使 用 XType 的 一 个 鲜 为 人 知 的 好 处 是 ， 可 以 使 写 出 的 代码 更 简洁 一 些 。 因 为 可 以 用 纯 对 象 表 
示 法 ， 所 以 以 内 联 方式 指定 所 有 XType 子 项 ， 代 码 会 更 精简 。 以 下 是 对 前 面 案例 的 修改 ， 包 含 了 
其 所 有 子 元 素 的 内 联 : 
































Ext .create('Ext.window.Window',{ 





width 00 
height : 90 
title : 'Accordion window', 
layout aceordiom', 
border : false, 
layoutConfig : { 
animate : true 
je 
items : 
{ 
xtype : 'panel', 
title : 'Plain Panel', 
html  : 'Panel with an xtype specified' 
{ 
title : 'Plain Panel 2', 
html : 'Panel with <b>no</b> xtype specified' 
} 
] 
}) .show(); 


可 以 看 到 ， 这 段 代 码 用 window 配 置 对 象 以 内 联 方 式 包 含 了 所 有 子 配置 项 。 通 过 如 此 简单 的 
示例 无 法 看 到 使 用 XType 所 带 来 的 性 能 提升 。XType 所 带 来 的 最 大 程度 的 性 能 提升 体现 在 那些 大 
型 应 用 中 ， 其 中 有 相当 多 的 组 件 需要 实例 化 。 

组 件 还 包含 男 一 个 提升 性 能 的 特性 : 懒惰 泻 染 。 懒 惰 演 染 意 味 着 一 个 组 件 只 有 在 必要 的 时 修 
才 被 泻 染 。 











3.1.2 组件 泻 染 


Ext .Component 类 支持 直接 泻 染 和 懒惰 ( 按 需 ) 演 染 这 两 种 模式 。 直 接 演 染 可 以 在 
Component 的 一 个 子 类 通过 renderTo 或 applyTo 属 性 实例 化 时 进行 ，renderTo 指 向 该 组 件 借 
以 演 染 自身 的 一 个 引用 ,而 applyTo 则 是 引用 一 个 元 素 ， 该 元 素 的 HTML 结 构 令 组 件 可 以 根据 被 
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引用 的 HTML 创 建 自己 的 子 元 素 。 通 常 是 希望 一 个 组 件 在 实例 化 的 同时 被 泻 染 , 才 使 用 这 些 参数 ， 
如 以 下 示例 所 示 


Var myPanel = Ext.create('Ext.panel.Panel',t{ 
renderTo : qdqocument .bodqy， 


height SS 四 

width FSO; 

title : 'Panel rendered immediately', 
frame "rue 


}); 


这 段 代 码 的 运行 结果 是 Ext .panel .Panel 得 到 即刻 泻 染 ， 有 些 时 候 需 要 这 样 ， 有 些 时 候 则 
不 需要 。 不 需要 即刻 演 染 的 情况 是 , 希望 把 演 染 推迟 到 代码 执行 的 男 一 时 间 , 或 者 该 组 件 是 男 一 
个 组 件 的 子 组 件 。 

如 果 想 推迟 组 件 的 演 染 ， 那 就 忽略 renderTo 和 applyTo 属 性 ， 并 在 觉得 必要 的 时 候 调用 该 
组 件 的 render 方 法 : 



































Var myPanel = Ext.create('Ext.panel.Panel',t{ 
erght, -S00 
width : 150, 
title : 'Lazy rendered Panel', 
frame : true 
于 
// …… 业 务 还 辑 代码 ……， 


myPanel.render (document .body); 

在 这 个 示例 中 , 创建 了 Ext .panel .Panel 的 一 个 实例 , 并 创建 了 一 个 对 它 的 引用 myPanel。 
在 一 些 假 设 的 应 用 逻辑 后 ， 调 用 myPanel.rendqer， 并 将 一 个 引用 传人 aqocument . body， 可 以 
把 面板 泻 染 到 文档 主体 。 

也 可 以 癌 rengder 方 法 中 传人 某 元 素 的 一 个 ID: 





myPanel .render('someDivI1id');} 


在 往 render 方 法 中 传 和 一 个 元 素 ID 的 时 候 , 组 件 将 使 用 那个 ID 配合 Ext .get 来 管理 该 元 素 ， 
而 元 素 被 存储 在 它 的 本 地 el 属性 中 。 如 果 你 有 似曾相识 的 感觉 ， 可 能 还 记得 上 一 章 里 关于 
Ext .Element 的 讨论 ,其 中 通过 访问 一 个 部 件 的 el 属性 或 者 使 用 它 的 访问 方法 ( accessor method ) 
getEL 来 实现 对 它 的 引用 。 

这 一 规则 有 一 个 重大 例外 , 那 就 是 当 该 组 件 是 男 一 个 组 件 的 子 组 件 时 , 绝 不 能 指定 applyTo 
或 者 renderTo。 包 含 其 他 组 件 的 组 件 有 一 个 父子 关系 ， 也 称 为 容器 模型 。 如 果 一 个 组 件 是 另 
个 组 件 的 子 组 件 ， 它 就 会 在 配置 对 象 的 items 属 性 中 指定 ， 而 它 的 父 组 件 将 在 必要 的 时 候 管理 对 
其 rendezt 方 法 的 调用 。 这 称 为 懒惰 渔 染 或 者 延 时 泻 染 。 

我 们 将 在 本 章 后 面 的 内 容 中 探讨 容器 , 你 将 了 解 更 多 关于 组 件 间 父子 关系 的 内 容 , 但 首先 必 
须 理 解 组 件 的 生命 周期 , 它 详细 规定 了 组 件 是 如 何 创 建 、 演 染 并 最 终 销毁 的 。 了 人 解 每 个 生命 周期 
各 个 阶段 的 运行 原理 ， 将 让 你 更 有 能 力 打 造 健壮 和 动态 的 用 户 界 面 ， 并 有 是 有 助 于 排查 解决 问题 。 
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3.2 组 件 生命 周期 


与 现实 世界 中 的 万 物 一 样 ，Ext JS 组 件 也 有 一 个 被 创造 、 使 用 和 销毁 的 生命 周期 。 这 个 生命 
周期 被 划分 为 三 个 主要 阶段 : 初始 化 、 泻 染 和 销毁 、 如 图 3-3 所 示 。 








初始 化 





图 3-3 Ext JS 组 件 生命 周期 总 是 始 于 初始 化 ， 也 总 是 以 销毁 结束 。 

组 件 并 非 要 进入 泻 染 阶段 才 可 以 被 销毁 
为 了 更 好 地 利用 这 个 框架 , 你 必须 深入 细致 地 了 解 这 个 生命 周期 的 运行 原理 。 如 果 要 开发 扩 
、 插 件 或 者 合成 组 件 ， 这 一 点 尤为 重要 。 组 件 生 命 周期 的 每 一 阶段 都 要 经 历 好 几 步 ， 这 是 通过 


类 Ext E Component 来 控制 的 o 
































江油 


3.2.1 初始 化 


初始 化 阶段 就 是 一 个 组 件 诞生 的 阶段 所 有 必需 的 配置 设 定 、 事 件 注册 和 预演 染 过 程 都 发 生 
在 这 个 阶段 ， 如 图 3-4 所 示 。 




















分 配 ID 或 者 
自动 生成 ID 














初始 化 组 件 















@ (应 用 配置 @ 人 党 染 阶段 开始 eit) 和 @ 


anager, 
a 调用 到 全 泥 
a 组 件 调整 及 人 
@ 人 人、 初始 化 括 为 状态 事件 初始 化 合 


和 件 作 
图 3-4 ”在 组 件 生命 周期 的 初始 化 阶段 会 执行 一 些 重要 步骤 ， 比 如 事件 和 组 件 注册 ， 以 
及 调用 initcomponent 方 法 。 很 重要 的 一 点 是 要 记 住 , 一 个 组 件 可 以 被 实例 化 
但 不 一 定 被 泻 染 
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让 我 们 来 探讨 一 下 初始 化 阶段 的 各 步 操作 。 
(1) 应 用 配置 。 在 实例 化 一 个 组 件 的 时 候 ， 传 人 一 个 配置 对 象 ， 配 置 对 象 包含 了 组 件 实现 其 功 
能 所 必需 的 全 部 参数 和 引用 。 这 一 步 是 在 Ext .component 部 件 基 类 的 开头 几 行 完成 的 。 
(2) 注册 基础 组 件 事件 。 根 据 组 件 模 型 ，Ext .component 的 每 个 子 类 都 默认 拥有 一 套 由 基 类 
触发 的 核心 事件 。 这 些 事件 在 以 下 一 些 行为 发 生前 后 触发 : 启用 /禁用 、 显 示 、 隐 藏 、 泻 
染 、 销 毁 、 状 态 还 原 和 状态 保存 。 上 一 个 事件 触发 后 ， 可 以 测试 是 否 能 够 成 功 返 回 一 个 
被 注册 的 事件 处 理 程序 ， 并 在 执行 任何 实际 的 操作 之 前 取消 该 行为 。 例 如 ， 当 调用 
myPanel. show 时 ， 它 会 触发 bseforeshow 事 件 ， 后 者 将 执行 为 该 事件 注册 的 任何 方法 。 
如 果 beforeshow 事 件 处 理 程序 返回 false，myPanel1 就 不 会 显示 。 
(3) 分 配 或 者 自动 生成 组 件 D。 如 果 没 有 为 组 件 配置 静态 ID ， 它 会 合并 该 组 件 的 XType 和 一 个 
从 1000 开 始 自动 生成 的 数值 , 自动 生成 一 个 D。 比 如 说 , 创建 一 个 Ext .panel .Panel 的 实 
例 而 不 给 它 配置 静态 ID ， 结 果 该 组 件 就 会 有 一 个 类 似 于 “panel-1001” 的 自 动 生成 的 ID。 
(4) 构造 预 初始 化 组 件 插件。 执行 initcomponent 方 法 之 前 定义 的 任何 插件 ， 都 是 在 这 一 步 
构造 的 。 这 可 以 让 网 格 面板 编辑 器 之 类 的 插件 在 很 早 的 时 候 就 执行 某 些 操作 ， 比 如 初始 
化 编辑 需 输 入 框 。 
(5) 运行 initcomponent。Component 的 子 类 在 initcomponent 方 法 中 执行 大 量 操作 ， 比 
如 注册 子 类 特有 事件 、 引 用 数据 存储 以 及 创建 子 组 件 。initcomponent 被 用 作对 构造 器 
的 补充 ， 而 且 通 常 被 用 作 扩 展 component 或 者 其 子 类 的 主要 切 人 点 。 稍 后 我 们 将 详细 介 
绍 如 何 用 initcomponent 实 现 扩展 。 
(6) 注册 ComponentManager。, 每 一 个 被 实例 化 的 组 件 都 通过 一 个 ExtJS 生 成 的 唯一 字符 串 ID， 
被 注册 到 componentManager 类 。 你 可 以 选择 在 传人 构造 器 的 配置 对 象 中 传人 一 个 id 参 
数 来 覆盖 Ext JS 生成 的 D。 要 当心 的 是 ， 如 果 用 一 个 非 唯一 的 注册 ID 发 出 一 个 注册 请 求 ， 
则 最 新 的 注册 将 覆盖 之 前 的 注册 。 如 果 你 打算 使 用 自己 的 ID ， 一 定 要 确保 使 用 唯一 的 ID。 
(7) 调用 基础 混入 类 构造 器 。 组 件 利 用 两 个 混入 类 来 提供 低级 别 功能 。Ext .util.Observable 
赋予 了 组 件 侦 听 和 触发 事件 的 能 力 , 而 Ext .state.Stateful 则 负责 为 组 件 处 理 状 态 特 
有 事件 。 
(8) 启动 调整 尺寸 状态 事件 。 在 这 一 步 component 把 它 的 基础 调整 尺寸 事件 注册 为 一 个 状态 
特有 事件 。 这 意味 着 component 的 任何 子 类 都 有 可 能 感知 状态 以 调整 尺寸 。 
(9) 初始 化 插件 。 如 果 在 配置 对 象 中 把 插件 传 入 构造 器 ， 插 件 的 Init 方 法 将 被 调用 ， 而 其 父 
component 将 作为 引用 传 信 。 很 重要 的 一 点 是 要 记 住 ， 插 件 是 根据 它们 被 引用 的 顺序 调 
用 的 。 
(10) 引导 组 件 的 加 载 器 。 如 果 组 件 是 用 一 个 loager 配 置 属性 配置 的 ， 那 它 就 被 用 来 构造 一 个 
ComponentLoader 的 实例 ,这 个 类 负责 通过 Ajax 为 一 个 组 件 获 取 数 据 , 并 利用 一 段 HTML、 
一 个 数据 或 者 一 个 组 件 泻 染 器 来 显示 数据 o 详细 信息 参见 Ext : ComponentLoader 文 档 o 

(11) 演 染 组 件 。 如 果 renderTo 或 者 applyTo 参 数 被 传人 构造 器 ， 那 泻 染 阶段 就 开始 了 ; 否 
则 ,组 件 会 保持 休眠 ， 等 待 代码 或 者 它 的 一 个 父 组 件 调 用 它 的 render 方 法 。 
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组 件 生 命 周 期 这 个 阶段 通常 是 最 快 的 , 因为 所 有 工作 都 是 在 JavaScript 中 完成 的 。 特 别 重 要 的 
一 点 是 要 记 住 ， 组 件 并 不 一 定 要 泻 染 过 才能 销毁 。 
3.2.2 ” 泻 染 

在 演 染 阶段 , 你 可 以 获得 组 件 已 经 成 功 初始 化 的 可 视 化 反馈 信息 。 如 果 初 始 化 因为 某 种 原因 
失败 了 ,那么 该 组 件 可 能 不 会 正确 演 染 或 者 根本 不 会 渲染 。 对 复杂 的 组 件 来 说 ， 这 时 会 消耗 掉 很 
多 CPU 周 期 , 会 要 求 浏览 器 绘 制 屏幕 ,会 进行 运算 以 确保 该 组 件 的 所 有 元 素 都 可 以 获得 正确 的 布 
局 和 尺寸 。 图 3-5 展 现 了 尝 染 阶段 的 步骤 。 


@ 二 设置 容器 CC onRender ) @ 


通过 hideMode 属 
性 设置 显示 模式 
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(如 果 存 在 ) (如 果 配 置 过 ) 




































触发 beforerender 








禁用 组 件 
名 (如 果 配 置 过 ) 







隐藏 组 件 


组 件 内 及 
(如 果 配 置 过 ) 初始 化 组 人 


afterRender 


@ ee 触发 afterrender 事 件 @ 


图 3-5 一 个 组 件 生命 周期 的 演 染 阶段 可 能 会 占用 大 量 CPU， 因 为 它 需 要 把 
元 素 添加 到 DOM， 还 需要 进行 运算 以 恰当 地 按 尺 寸 生 成 并 管理 元 素 
如 果 没 有 指定 renderTo 或 者 applyTo， 则 必须 要 调用 一 次 rengder 方 法 ,触发 该 阶段 。 如 果 组 
件 不 是 男 一 个 ExtJS 组 件 的 子 组 件 ， 代 码 必须 要 调用 render 方 法 ， 并 传人 DOM 元 素 的 一 个 引用 : 
someComponent .render ('someDivId'); 
如 果 该 组 件 是 另 一 个 组 件 的 子 组 件 ， 它 的 render 方 法 将 会 被 其 父 组 件 调 用 。 让 我 们 来 探索 
一 下 泻 染 阶段 的 各 个 步 又。 
( 触发 beforerender。 组 件 触发 beforerender 事 件 , 并 且 检 查 任何 已 注册 的 事件 处 理 程 
序 的 返回 值 。 如 果 一 个 已 注册 的 事件 处 理 程序 返回 false， 组件 就 中 止 演 染 行为 。 回 想 
一 下 ， 初 始 化 阶段 的 第 二 步 为 Component 的 子 类 注册 了 核心 事件 ， 而 “before” 事 件 可 
以 中 止 执行 行为 。 










初始 化 组 件 元 
素 以 获取 焦点 

































































3.2 组件 生 命 周期 49 











(2) 组 件 的 元 素 被 置 入 缓存 。 如 果 配 置 了 一 个 带 el 属 性 的 组 件 ， 那 它 会 围绕 该 元 素 封装 一 个 








xt .Element 的 实例 o 

















(3) 组 件 注 册 为 可 浮动 。 如 果 组 件 配 置 为 可 浮动 ， 它 将 把 自 





用 z-index 和 焦点 管理 。 这 一 步 对 于 Window 和 Menu 等 类 


动 ) 于 其 他 UI 部 件 上 方 。 





也 注册 到 windqowManager， 以 局 
很 重要 ， 它 们 被 设计 为 定位 ( 浮 

















(4) 设置 容器 。 组 件 需 要 有 一 个 容 身 之 处 ， 而 这 个 容 身 之 处 就 是 它 的 容器 。 如 果 指 定 一 个 对 

















某 元 素 的 renaerTo 引 用 ， 组 件 就 往 被 引用 的 元 素 (也 就 是 它 的 容器 ) 上 添加 一 个 子 aiv 
元 素 ， 并 且 在 新 添加 的 子 元 素 内 部 演 染 该 组 件 。 如 果 指 定 了 一 个 applyTo 元 素 ， 在 











applyTo 参 数 中 指定 的 被 引用 元 素 就 成 了 组 件 的 容器 ， 
元 素 添加 到 被 引用 的 元 素 上 。 然后 该 组 件 对 在 applyTo 








管理 权 。 当 组 件 是 男 一 个 组 件 的 子 组 件 时 ， 通 常 这 两 者 都 不 会 传人 ， 在 这 里 容 带 也 就 是 























而 组 件 只 把 那些 泻 染 它 所 需要 的 
中 引用 的 DOM 元 素 就 有 了 完全 的 








父 组 件 。 有 一 点 要 注意 , 那 就 是 你 应 该 只 传人 renderTo 或 者 applyTo, 而 不 是 两 者 同时 
传人 。 我 们 将 在 稍 后 学 习 更 多 关于 部 件 的 知识 时 探索 *enderTo 和 applyTo。 

(5) 执行 onRender。 对 Component 的 子 类 来 说 这 是 至 关 重要 的 一 步 ， 所 有 DOM 元 素 都 在 这 
一 步 插入 ,以 泻 染 组 件 并 将 其 绘制 在 屏幕 上 。 在 之 后 扩展 Ext .component 或 者 任何 子 类 
的 时 候 , 每 个 子 类 原则 上 都 应 该 首先 调用 它 超 类 的 onRender , 而 这 确保 Ext .Component 

















基 类 可 以 插入 泻 染 一 个 组 件 所 需 的 核心 DOM 元 素 。 











(6) 配置 显示 模式 。 组 件 的 元 素 被 指示 根据 组 件 hiaeMode 属 性 的 设置 情况 ， 设 置 其 显示 模式 。 通 
常 来 说 ， 不 用 担心 应 该 把 hiqeModae 设 置 成 什么 , 不 过 了 解 可 用 的 选项 总 是 好 事 ， 以 防 你 要 根 
据 特殊 的 HTML 需 求 创建 一 个 自 定义 组 件 。 它 默认 被 设置 为 'display' (CSS display : 








none; )， 但 其 他 的 可 选项 有 'visibility' (CSS visibility:hidden; ) 和 'offsets'。 
hideMode 设 置 成 'offsets' 可 以 让 组 件 的 元 素 就 位 ， 并 在 XRFIY 愉 标 轴 上 人 负 偏 移 1000 像 素 。 
(7) 初始 化 overcls ( 如 果 配 置 过 )。 如 果 给 一 个 组 件 配置 cvercls 属 性 ,， 则 组 件 会 指示 其 元 素 在 
它 的 mouseover 事 件 上 添加 该 CSS 类 ， 并 在 mouseout 事 件 上 设置 removeOvercLs 属 性 。 
(8) 触发 render 事 件 。 在 这 一 步 所 有 必需 的 元 素 都 已 经 被 插入 DOM, 并 昌都 应 用 了 样式 。 触 














发 render 事 件 ， 触发 任何 已 注册 的 事件 监听 器 。 























(9) 初始 化 组 件 的 内 容 。 如 果 组 件 配 置 了 contentEl1、html 和 /或 tpl ( Template ) 和 data 











属性 的 组 合 ， 则 它 会 把 相应 的 内 容 作 为 自己 元 素 的 子 元 素 泻 染 。AbstractComponent 


经 过 模型 化 设计 ， 如 果 你 愿意 的 话 可 以 使 用 一 个 、 两 个 
首先 演 染 ， 然 后 是 contentE1， 接 着 是 tpl1， 最 后 是 da 
































或 者 全 部 (三 个 ) 属性 。html 将 


七 ao 








(10) 执行 afterRender。afterRender 是 一 个 至 关 重 要 的 泻 染 后 方法 , 由 render 方 法 自动 
调用 。 这 个 方法 负责 配置 组 件 的 尺寸 ,排列 和 定位 组 件 ， 并 往 HTML 内 容 添加 样式 。 它 








也 负责 初始 化 Resizable 的 一 个 实例 ( 如 果 配 置 过 )， 把 组 件 的 元 素 设置 为 可 滚动 ( 如 果 
通过 autoscroll 配 置 过 )， 并 使 组 件 可 拖 动 ( 如果 做 过 相应 配置 )，、 最 后 ， 如 果 组 件 就 兼 
容 富 网 络 应 用 (ARIA ) 做 过 配置 ， 则 部 件 也 进行 相应 的 初始 化 。 有 一 点 要 注意 ， 那 就 是 
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所 有 带 afterRender 方 法 的 component 子 类 都 应 该 要 调用 其 超 类 的 aft rRender 方 法 。 
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(11) 触发 afterrender 事 件 ,。 这 个 事件 对 于 类 的 关键 之 处 在 于 , 让 类 知道 所 有 关键 泻 染 操作 


© 
都 已 完毕 ， 组 件 已 经 做 好 修改 其 元 素 的 准备 。 为 让 你 的 子 类 可 以 执行 DOM 操 作 ， 这 个 
事件 通常 是 最 佳 监听 对 象 。 



































(12) 挂 接 afterRenderEvents。 如 果 组 件 设 置 了 一 个 afterRenderEvents 配 置 对 象 ， 它 








将 使 用 该 配置 对 象 把 元 素 监听 器 挂 接 到 可 挂 接 的 部 件 特有 的 元 素 引 用 , 比如 component 
的 el 和 Panel 的 body。 





(13) 初始 化 组 件 的 元 素 以 获取 焦点 。 被 配置 为 可 聚焦 的 组 件 和 有 可 聚焦 元 素 的 组 件 将 绑 定 到 














内 部 的 onFocus 处 理 程序 上 。 这 个 必 不 可 少 的 底层 命令 负责 处 理 那些 在 管理 了 底层 元 素 
的 focus 和 blur 事 件 后 ， 可 以 触发 自身 自 定 义 focus 和 blue 事 件 的 组 件 。 





(14) 隐藏 组 件 。 如 果 组 件 的 配置 中 hidqdqen 设 为 true， 则 执行 元 素 的 hidqe 方 法 。 这 样 可 以 通 











过 配置 的 nigqeMode 属 性 来 隐藏 该 组 件 。 











(15) 禁用 组 件 。 如 果 组 件 的 配置 中 gisabled 设 为 Lrue， 则 执行 组 件 的 gaisable 方 法 ， 这 样 









































可 以 有 效 地 禁用 该 部 件 。 有 一 点 要 注意 ， 那 就 是 禁用 部 件 没 有 触发 aisable 方 法 。 











通常 来 说 ， 组 件 生命 周 期 的 大 部 分 都 处 于 泻 染 阶段 ， 直 到 它 在 销毁 阶段 消亡 。 








3.2.3 ”销毁 


和 现实 中 的 生命 一 样 , 组 件 的 消亡 也 是 其 生命 周期 中 的 关键 阶段 。 销毁 一 个 组 件 要 执行 一 些 
关键 任务 ， 比 如 把 它 自身 和 所 有 子 组 件 从 DOM 树 中 移 除 ， 并 撤销 该 组 件 在 componentManager 
类 的 注册 ， 以 及 撤销 事件 监 昕 器 的 注册 ， 如 图 3-6 所 示 。 





















撤销 组 件 关 于 
浮动 的 注册 











从 父 容器 中 移 除 组 件 








onDestroy 


















调用 状态 混入 
类 的 销毁 方法 








移 除 元 素 并 清除 监听 器 ) @ 








撤销 在 Component- 

Manager 的 注册 

图 3-6 ”组 件 生命 周期 的 销毁 阶段 跟 它 的 初始 化 阶段 同等 重要 ， 因 为 事件 监 
听 器 和 DOM 元 素 必须 要 撤销 注册 并 移 除 ， 以 减少 总 体 的 内 存 占 用 











触发 销毁 事件 
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组 件 的 destroy 方 法 可 以 由 其 父 容器 或 者 由 代码 实施 调用 。 以 下 是 组 件 生命 周期 最 后 这 一 阶 
段 的 步骤 。 
(1) 触发 beforedestroy。 这 个 事件 跟 很 多 before<action> 事 件 一 样 ， 是 可 取消 事件 ， 以 
防 组 件 在 事件 处 理 程序 返回 false 的 时 候 被 销毁 。 
(2) 调用 peforeDestroy。 这 个 方法 是 组 件 的 destroy 方 法 中 最 早 调用 的 一 个 ， 也 是 移 除 任 
何 非 组 件 元 素 ( 比如 工具 栏 或 者 按钮 ) 的 绝 佳 时 机 。component 的 任何 子 类 都 应 该 调用 
其 超 类 的 beforeDestroy 方 法 。 
(3) 撤销 组 件 关 于 浮动 的 注册 。 如 果 一 个 组 件 是 浮动 的 , 它 在 Float ingManager 的 注册 就 被 撤销 。 
(4) 从 父 容 器 中 移 除 组 件 。 如 果 组 件 是 一 个 父 容 需 的 子 组 件 ， 它 就 从 父 容 器 被 移 除 。 
(5) 调用 onDesttoy。onDpesttroy 方 法 负责 以 下 几 项 任务 。 首 先是 立刻 销毁 任何 配置 过 的 拖 
放 代理 。 然 后 是 销毁 Resizer (如 果 配 置 过 )。 接 下 来 ， 如 果 注 册 过 焦点 DelayedTask， 
就 把 它 从 组 件 中 移 除 。 如 果 组 件 被 配置 为 监控 浏览 器 的 调整 尺寸 事件 ， 则 移 除 该 调整 尺 
才 事 件 处 理 程序 。 最 后 ， 如 果 组 件 配置 了 componentLayout 、LoadMask 和 任何 浮动 子 
元 素 ， 则 进行 销毁 。 
(6) 销毁 注册 的 插件 。 在 销毁 阶段 的 这 一 步 ， 循 环 访问 所 有 注册 过 的 插件 ， 调 用 它们 各 自 的 
destroy 方 法 。 
(7) 清除 元 素 和 元 素 监听 器 。 如 果 组 件 已 经 被 泻 染 ， 则 移 除 任何 注册 到 其 El1ement 的 处 理 程 
序 ， 并 将 Element 从 DOM 中 移 除 。 
(8) 触发 destroy 事 件 。 这 个 事件 触发 任何 注册 过 的 事件 处 理 程序 ， 标 志 着 该 组 件 不 在 存在 
于 DOM 中 。 
(9) 撤销 组 件 在 componentManager 的 注册 。 移 除 componentManager 类 中 对 这 个 组 件 的 引用 。 
(10) 销毁 状态 混入 类 。 在 这 一 步调 用 状态 混和 人 类 以 进行 销毁 ,撤销 任 何 状态 特有 的 组 件 事 件 
的 注册 。 
(11) 清除 组 件 的 事件 处 理 程序 。 撤 销 所 有 事件 处 理 程序 在 组 件 的 注册 。 
以 上 就 是 对 组 件 生命 周期 的 深入 探究 ， 而 组 件 生 命 周 期 也 正 是 令 Ext JS 框架 如 此 强大 和 成 功 
的 特性 之 一 。 
如 果 你 打算 开发 自 定义 组 件 , 请 不 要 忽略 组 件 生 命 周 期 的 销毁 环节 。 很 多 开发 者 就 是 因为 忽 
略 了 这 至 关 重 要 的 一 步 而 陷入 麻烦 ， 在 代码 中 残留 了 工件 ， 比 如 持续 轮 询 Web 服 务 器 的 绑 定数 据 
存储 ,或 者 是 预 设 DOM 中 有 元 素 存 在 的 事件 监听 器 。 如 果 不 妥善 地 清理 掉 它们 ， 可 能 会 导致 异 
和 常 ， 并 中 止 执行 一 个 至 关 重 要 的 逻辑 分 文 。 
接 下 来 ,我 们 要 来 看 container 类 ， 它 是 component 的 一 个 子 类 ， 赋予 了 组 件 管理 父子 关 
系 中 其 他 组 件 的 能 


























































































































































































































3.3 ”容器 

















Container 是 一 个 幕后 类 , 它 给 组 件 管理 其 子 元 素 提供 了 基础 ， 而 它 经 常 被 开发 者 忽视 。 这 


52 第 3 章 组件 和 容器 








个 类 提供 了 一 整套 工具 方法 ， 其 中 包括 aada、insert 和 remove 方 法 ， 还 有 duery 、bupble 和 
cascade 等 子 工 具 方法 。 这 些 方法 被 大 多 数 子 类 使 用 ， 包括 Panel、Viewport 和 wingdow。 在 你 
的 应 用 中 使 用 这 些 类 也 同样 很 常见 。 




















3.3.1 ”构建 一 个 市 子 元 素 的 容器 
为 了 学 习 这 些 工 具 的 原理 , 你 需要 构建 一 个 包含 一 些 子 元 素 的 容器 竺 用 ,如 代码 清单 3-1 所 示 。 
代码 清单 3-1 创建 第 一 个 容器 








var panell = { 
html : 'I am Panell', 二 配置 面板 
id : 'panell', 
frame : true, 


height : 100 


Var panel2 = { 
html : '<b>I am Panel2</b>', 
id : 'panel2', 
frame : true 
J 
Var myWin = Ext.create('Ext.window.Window',t{ 
id : ‘myWin', 创建 窗口 


height : 400， 
width : 400, 
items : [ 
panell, 
panel12 
] 
后 


myWin.show(); 


我 们 看 一 下 代码 清单 3-1。 你 要 做 的 第 一 件 事 ， 是 创建 两 个 普通 的 面板 @， 人 然后 创建 mywin@， 
Ext .window.Window 的 一 个 实例 ， 包 含 之 前 定义 好 的 面板 。 泻 染 过 的 UI 应 该 如 图 3-7 那 样 。 
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Iam Paneli 


Iam Panel2 


图 3-7 利用 代码 清单 3-1 泻 染 后 的 容器 UI 
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你 要 在 mywin 的 底部 留 出 一 些 空 5 间 ， 在 添加 元 素 的 时 候 会 用 得 上 。 每 一 个 容器 都 通过 一 个 
items 属 性 保存 对 其 子 元 素 的 引用 ， 该 属性 是 Ext .util.Mixedcollection 的 一 个 实例 ， 可 以 
通过 somecontainer .items 访 问 。 
Mixedacollection 是 一 个 工具 类 ， 它 可 以 让 框架 保存 一 个 混合 数据 集 (包括 字符 串 、 数 组 
和 对 象 )， 并 为 其 建立 索引 。 它 还 提供 了 一 系列 便利 的 工具 方法 。 

现在 你 已 经 演 染 好 了 容器 ， 让 我 们 来 给 它 添加 子 元 素 。 
























































3.3.2 ”人 处 理子 元 素 


和 在 现实 世界 中 应 对 子女 一 样 , 处 理子 元 素 也 会 让 你 纠结 地 生出 白 发 , 所 以 必须 要 学 习 使 用 
可 用 的 那些 工具 。 和 掌握 了 这 些 工 具 方法 ， 你 就 可 以 动态 更 新 ULI， 这 正 是 Ajax 网 页 的 精髓 。 

添加 组 件 是 一 项 简单 的 任务 ， 有 两 个 方法 可 以 选择 : add 和 insert。ad6 方 法 只 会 往 容 器 的 
层级 上 添加 一 个 子 元 素 ， 但 使 用 insert 可 以 在 一 个 特定 的 索引 位 置 往 容器 中 插入 一 个 元 素 。 

我 们 来 往 代码 清单 3-1 中 创建 的 容器 上 添加 元 素 ， 为 此 要 用 到 便捷 的 Firebug JavaScript 控 
制 台 : 


Ext .getCmp('myWin') .add({ 



































title : 'Appended Panel', 
lel : 'addedPanel', 
html : 'Hello there!' 


PB)3 
运行 这 段 代 码 将 把 元 素 添 加 到 容器 ， 参 见 图 3-8。 


Iam Panell 


Iam Panel2 
Appended Panel 
Hello there! 





图 3-8” 往 代码 清单 3-1 中 的 窗口 添加 一 个 面板 


添加 子 元 素 很 容易 ， 但 有 时 候 必 须 能 够 把 元 素 插入 到 特定 的 索引 位 置 。 使 用 insert 方 法 可 
以 轻松 完成 这 项 任务 : 




















Ext .getCcmp ('myWin') .insert(1, { 
title : 'Inserted Panel', 
id : 'insertedPanel', 
html : 'It is cool here!' 
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在 索引 位 置 1 插入 一 个 新 面板 ， 它 就 在 Panel1l 下 方 。 结 果 应 该 如 图 3-9 所 示 。 
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Iam Panell 


Inserted Panel 
lt is cool here! 
I am Panel2 


Appended Panel 
Hello there! 








图 3-9 ”动态 添加 和 插入 的 子 面板 泻 染 后 的 结果 


可 以 看 到 ,添加 和 搬入 子 组 件 毫 不 费力 。 移 除 元 素 也 同样 容易 ， 这 一 操作 需要 两 个 参数 。 第 
一 个 参数 是 对 想 要 移 除 子 元 素 的 组 件 或 者 组 件 ID 的 引用 。 而 第 二 个 参数 指定 应 不 应 该 为 该 组 件 调 
用 aestroy 方 法 ， 当 想 把 组 件 从 一 个 容器 转移 到 另 一 个 容器 的 时 候 , 这 一 参数 将 赋予 你 极 强 的 灵 
活性 。 在 便捷 的 Firebug 控 制 台 上 ， 要 像 下 面 这 样 移 除 最 近 添加 的 一 个 子 面板 : 


Var panel = Ext.getCmp('addedPanel'); 
Ext .getCmp('myWin') .remove (panel); 


执行 这 段 代码 后 , 会 发 现 面 板 立刻 就 消失 了 ,这 是 因为 没有 指定 第 二 个 参数 , 它 的 默认 值 是 
true。 可 以 通过 把 一 个 父 容器 的 autoDestroy 设 置 为 false， 来 履 盖 这 个 默认 参数 。 当 移 除 一 
个 组 件 时 ， 调 用 该 组 件 的 destroy 方 法 ,启动 它 的 销毁 阶段 并 删除 其 DOM 元 素 。 

如 果 想 把 一 个 子 元 素 移动 到 一 个 不 同 的 容器 中 ， 就 要 把 *emove 方 法 的 第 二 个 参数 指定 为 
false， 然 后 往 父 容器 中 添加 或 搬入 该 子 元 素 ， 如 下 所 示 : 












































var panel = Ext.getCmp('insertedPanel'); 
Ext .getCmp('myWin') .remove(panel, false); 
Ext .getCmp('otherParent') .add (panel); 


上 面 的 这 段 代码 假定 已 经 有 男 一 个 以 'otherParent ' 的 ID 实例 化 的 父 容器 。 创 建 一 个 对 之 
前 插入 面板 的 引用 , 并 从 它 的 父 容 右 中 将 其 非 破坏 性 移 除 。 接 下 来 , 把 它 添加 到 它 的 新 父 容 需 中 ， 
实施 DOM 级 的 移动 操作 ， 把 子 组 件 的 元 素 移动 到 新 父 容器 的 内 容 体 元 素 中 。 

Container 类 提供 的 工具 方法 不 只 是 对 子 元 素 的 添加 和 移 除 操作 , 还 让 你 能 够 深入 该 容器 的 
层级 以 寻找 子 组 件 。 如果 想 搜集 一 个 特定 类 型 或 者 满足 特殊 标准 的 子 元 素 的 列表 , 并 对 它们 实施 
一 项 操作 ， 这 就 会 很 有 用 。 


3.4 查询 组 件 


ExtJS 4.0 带 有 一 个 新 的 Componentouery 类 , 它 有 一 个 选择 器 引 敬 ,类 似 于 浏览 器 的 选择 央 
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引擎 ,这 意味 着 在 搜寻 组 件 的 时 候 可 以 使 用 熟悉 的 查询 构造 语句 。 因 为 componentouery 是 模仿 
浏览 锅 的 选择 需 引 擎 设计 的 ， 所 以 可 以 以 任何 源 节点 为 根 执行 查找 操作 。 

为 了 加 以 演示 , 我 们 创建 了 一 个 包含 深层 人 藤 套 面 板 的 示例 。 要 查看 这 一 工具 , 请 访问 以 下 地 
址 : http://extjsinaction.com/v4/examples/ch03/using ComponentQuery.html。 在 图 3-10 中 , 我 们 要 使 
用 Firefox 的 Firebug 插 件 的 多 行 控制 台 模 式 。 

















日 口 口 Extjsin Action Chapter03 | Using ComponentQuery 3 
a | | [Pl|D hp://ext4ia/exar “7 v CI(S co0Q) [7) [| 


邮 


itemId: pi 


itemId : pi_c1i 


itemId: pl1_cl_gcl， 


grandChild: true, 
unique: 865 


itemId: p2 


itemId : p2_ci 


itemId: p2_c1_gcl, 


grandChild: true, 
Unique: 784 


itemId: p3 


itemId : p3_c1i 


itemId: p3_c1_gcl, 


grandChild: true, 
unique: 1 


itemId : pi_c2 


itemId: p1_c2_gcl， 


grandChild: true, 
unique: 281 


itemId : p2_c2 


itemId: p2_c2_gcl, 


grandChild: true, 
unique: 520 


itemId : p3_c2 


itemId: p3_c2_gcl, 


grandChild: true, 
unique: 214 


itemId : pi_c3 


itemId: pl_c3_gcl, 


grandChild: true, 
unique: 507 


itemId : p2_c3 


itemId: p2_c3_gcl, 


grandChild: true, 
unique: 808 


itemId : p3_c3 


itemId: p3_c3_gcl, 


grandChild: true, 
unique: 375 


Ext.ComponentQuery.query(' | [unique] 0; Submit query 





图 3-10 ”将 在 componentouery 示 例 中 用 到 的 工具 


这 个 在 线 工具 包含 了 多 个 四 层 骸 套 的 子 组 件 ， 首先 是 一 个 使 用 Fit 布 局 、 演 染 了 单个 “ 主 ” 面 
板 的 视 口 。 这 个 主 面板 有 一 个 master_panel 的 itemIdQ， 并 包含 三 个 子 面板 。 往 前 移 的 子 面板 
的 itemId 显 示 在 它们 的 标题 或 者 内 容 体 中 。 磐 套 最 次 的 组 件 有 一 个 grandchila 属 性 , 被 设 为 布 
尔 值 true。 你 将 看 到 ， 这 些 已 知 的 属性 都 可 以 用 于 追踪 任何 targetcomponent 。 最 后 ， 每 个 子 
组 件 都 有 一 个 名 为 unique 的 唯一 属性 ， 它 是 随机 生成 的 ， 并 随 着 每 一 次 页 面 刷新 而 改变 。 

首先 要 取得 最 顶端 面板 的 一 个 引用 。 在 这 里 和 示例 的 其 他 部 分 , 都 要 使 用 Firebug 控 制 台 ,所 
以 在 继续 阅读 后 续 内 容 的 时 候 请 保持 它 开 启 可 用 。 











注意 如 果 没 有 Firebug， 我 们 已 经 导入 了 一 个 工具 栏 ， 可 以 帮 你 实施 查询 。 你 唯一 要 做 的 就 是 
提供 查询 参数 ， 然 后 点 击 “提交 ”按钮 。 找 到 的 任何 组 件 都 将 淡出 并 再 次 淡 入 以 表明 它 
们 被 发 现 了 。 
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在 Firebug 的 JavaScript 控 制 台 中 输入 并 且 执 行 以 下 代码 。 你 会 发 现 整个 应 用 淡出 和 淡 入 : 





Var results = Ext.ComponentQuery.query ('#master_panel'), 
panel S TESULTtSL0: 
panel .body.fadeOut() .fadeIn();} 


在 这 段 代码 中 首先 创建 一 个 results 引 用 , 指向 查询 调用 的 结果 。 配置 的 查询 将 搜寻 并 返回 任何 
拥有 master_panel 的 iq 或 者 itemIdq 的 已 注册 组 件 。 

然后 设置 panel1 引 用 ， 指 向 返回 的 结果 集 的 第 一 个 元 素 。 不 管 找到 了 多 少 元 素 ， 
Componentouery 的 query 方 法 都 会 默认 返回 一 个 数组 。 这 就 意味 着 要 测试 查询 是 否 成 功 ， 必 须 
要 检查 返回 的 结果 集中 的 结果 数 ， 看 是 不 是 大 于 0。 

如 果 打 算 寻 找 唯一 的 结果 ， 也 可 以 把 前 两 行 代码 缩减 为 这 样 的 一 行 : 

Var panel = Ext.Componentouery .query ('#master panel') [0]; 

刚刚 实施 的 是 全 局 性 查询 。Ext JS 在 页 面 上 搜索 所 有 注册 的 组 件 ， 这 是 相对 高 级 别 的 查询 。 
但 也 可 以 深入 搜索 任何 有 特定 属性 的 组 件 。 

比如 说 ， 可 以 使 用 这 种 全 局 性 查询 机 制 来 查询 一 个 深层 租 套 面板 : 





































































































Var panel = Ext.ComponentQuery .query ('#p2_c3')[0]; 


此 外 还 有 一 些 其 他 的 模式 。 比 如 说 ， 如 果 想 搜索 一 个 属性 是 否 存在 ,就 可 以 这 么 做 。 要 搜索 
grandchild 属 性 是 否 存 在 ， 就 查询 [grandchi19] 。 如 果 想 搜索 唯一 的 属性 ， 比 如 设置 的 随机 
unigque 属 性 ， 则 可 以 查询 [unique="784"]。 尽 管 该 属性 的 值 其 实 是 一 个 整数 ， 还 是 给 它 打 上 
了 双 引 号 ， 指 示 Ext JS 测 试 值 的 类 型 。 

容器 能 够 通过 aown 方 法 顺藤摸瓜 进行 深层 查询 。 这 么 做 可 以 使 用 componentouery 机 制 ， 
迫使 搜索 的 范围 局 限 在 容器 自身 和 子 组 件 内 部 。 与 aown 方 法 相对 的 是 up 方法 。 子 组 件 可 以 使 用 
ComponentQuery 顺 着 父 层 级 往 上 查询 ， 但 查询 的 范围 从 子 组 件 开始 ， 然后 直接 上 升 到 最 顶层 的 
父 容器 。 

现在 你 已 经 有 了 管理 子 项 所 必需 的 核心 知识 。 让 我 们 转移 一 下 注意 力 ， 来 探索 一 些 常用 的 
Container 的 子 类 ， 感 受 一 下 Ext JS UI 的 强大 。 你 将 看 到 如 何 借助 Ext JS 利 用 浏览 器 所 有 能 用 的 
阅读 空间 创建 一 个 UI。 














































































































3.5” 视 口 容器 


Viewport 类 是 所 有 单纯 依靠 Ext JS 开 发 的 Web 应 用 的 基础 。 它 管理 着 浏览 器 100% 的 视 口 ， 
也 就 是 显示 区 域 。 这 个 类 的 代码 算 起 来 只 有 20 行 出 头 ， 极 为 精简 高 效 。 因为 它 是 container 类 
的 直接 子 类 ,所 以 所 有 子 组 件 管理 和 布局 功能 都 可 以 为 你 所 用 。 要 使 用 视 口 ， 先 来 尝试 一 下 以 下 
示例 代码 : 

















Ext .create('Ext.container.Viewport', { 
layout : 'border', 
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items : [ 


height 
region : 
title 


width 
region : 
title 


region : 
title 
} 
] 
人 
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yt 


: 'Does Santa live here?' 


1505 


“站 了 


: 'The west region rules' 


'Ccenter', 
:'No, this region rules!' 


代码 中 泻 染 过 的 视 口 用 到 了 整个 浏览 器 的 视 口 ,并 显示 了 三 个 用 border 布 局 加 以 组 织 的 面板 。 





如 果 调 整 浏览 器 窗口 的 尺寸 , 会 注意 到 中 央 的 面板 是 自动 调整 尺寸 的 , 这 展现 了 视 口 是 如 何 监听 
并 响应 浏览 圳 窗口 的 zesize 事 件 的 ( 见 图 3-11 )。Viewport 类 为 所 有 基于 ExtJS 并 把 该 框架 用 作 
富 网 络 应 用 完整 网 页 UI 解 决 方案 的 应 用 提供 了 基础 。 


‘eo © http://ext2play - Ext JS in Action Chapter 03 





0 


Does Santa live here? 


The west region rules No, this region rules! 





Done 





图 3-11 


识 鹏 YSlow 0.977s s3 ox 到 


第 一 个 视 口 ， 它 占据 了 浏览 器 全 部 的 可 用 阅读 空间 








很 多 开发 者 试图 在 一 个 受到 完全 管理 的 Ext JS 页 面 中 ， 创 建 多 个 视 口 以 显示 多 个 界面 ， 结 
都 碰 了 壁 。 要 解决 这 个 问题 , 你 可 以 综合 使 用 card 布 局 和 视 口 , 在 不 同 的 应 用 程序 界面 之 间 切 换 ， 
这 些 界 面 的 大 小 经 过 调整 以 适应 视 口 。 我 们 将 在 第 5 童 深入 探讨 布局 ,届时 你 将 学 到 诸如 fit 和 flip 
这 样 的 关键 词 在 布局 上 下 文中 是 何 含义 。 





3.6 小 结 














本 章 深 入 探索 了 组 件 模 型 ， 它 赋予 了 Ext JS 框架 一 个 管理 组 件 实例 的 统一 方法 。 组 件 生 命 周 
期 是 该 框架 UI 部 分 最 重要 的 概念 之 一 ， 这 就 是 我 们 在 深入 学 习 众多 部 件 之 前 就 介绍 它 的 原因 。 
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之 后 你 探索 了 容器 的 世界 ， 学 习 了 如 何 使 用 容器 来 管理 子 组 件 ， 了 解 了 Viewport 类 ， 以 及 
为 何 说 它 是 完全 基于 Ext JS 开发 的 Web 应 用 的 基础 。 

打 好 的 这 些 基 础 对 于 学 习 使 用 ExtJS UI 部 件 非 常 有 帮助 。 接 下 来 ， 我 们 要 探讨 面板 ， 它 是 最 
常用 的 显示 内 容 的 UI 部 件 。 


Ext JS 组 件 





到 了 这 里 ， 你 应 该 已 经 做 好 了 深入 学 习 Ext JS 框架 中 各 种 部 件 的 准备 了 。 在 这 一 部 分 ， 你 将 
有 机 会 学 习 运用 数据 驱动 的 视图 。 

第 4 章 介 绍 了 显示 用 户 交 互 内 容 的 核心 UI 组 件 ， 比 如 面板 、 窗 口 、 消 息 框 、 选 项 卡 、 工 具 
栏 和 按钮 ， 以 及 管理 子 元 素 的 容器 生命 周期 。 第 5 章 探 究 了 用 于 界面 组 织 的 布局 ， 比 如 Fit 布 局 、 
Card 布 局 和 Border 布 局 。 第 6 章 研 究 了 表单 和 不 同 的 输入 框 ， 比 如 单行 文本 框 、 多 行文 本 框 、 数 
字 输 入 框 和 组 合 框 ， 外 加 校 验 以 及 相关 的 数据 存储 和 数据 视图 。 

第 7 章 解 读 了 用 于 保存 数组 、JSON 和 XML 数据 的 数据 存储 ， 用 于 数据 驱动 视图 (包括 数据 
模型 、 代 理 、 读 取 器 和 写 入 器 ) 的 高 级 用 户 交 互 ， 以 及 关联 、 校 验 、 网 格 面板 和 编辑 器 插件 。 第 
8 章 讨 论 了 以 表格 形式 实现 快速 输入 的 网 格 面板 ， 并 使 用 诸如 菜单 、 交 互 、 编 辑 、 分 页 和 滚屏 的 
功能 呈现 和 操作 大 型 数据 集 。 第 9 章 介 绍 了 用 于 演示 层级 数据 的 树 ， 内 容 涵盖 远程 数据 加 载 、 编 
辑 节 点 数据 以 及 自 定义 背景 菜单 。 第 10 章 涉及 的 是 用 于 呈现 数据 表示 的 图 形 和 图 表 ， 以 及 它们 的 
图 表 类 型 、 形 状 、 主 题 和 说 明 。 

第 11 章 阐述 了 借助 数据 存储 、 网 格 面 板 、 树 、 表 单 和 模板 ， 用 于 服务 器 数据 交换 的 直接 远程 
方法 调用 。 第 12 章 讨论 了 如 何 使 用 拖 放 工作 流 ， 借 助 于 鼠标 手势 在 屏幕 上 移动 元 素 ， 以 及 相关 联 
的 覆盖 方法 、 拖 放生 命 周 期 ,还 有 网 格 面板 和 树 形 面板 插件 。 

最 后 ， 你 将 在 ExtJS 部 件 的 工作 原理 以 及 如 何 高 效 运用 它们 方面 打下 扎实 的 基础 。 























第 4 章 


核心 UI 组 件 








本 章 内 容 

口 探索 面板 

口 实现 面板 内 容 区 

口 显示 一 个 Ext .Window 
口 使 用 Ext .MessageBox 
口 创建 标签 面板 











开始 用 ExtJS 体 验 尝 试 或 者 开发 应 用 的 时 候 , 开发 者 经 常会 首先 复制 可 下 载 的 SDK 中 的 示 
例 。 虽然 这 种 方法 有 利于 学 习 如 何 实现 一 个 特定 的 布局 ， 但 在 解释 该 布局 的 工作 原理 方面 有 
所 欠缺 ， 而 这 会 让 你 头疼 不 已 。 在 本 革 ， 你 将 学 习 开 发 成 功 UI 方 案 所 赖 以 为 基础 的 那些 核心 

你 还 将 深入 学 习 面 板 的 工作 原理 , 并 探究 面板 上 可 以 显示 内 容 和 UI 部 件 的 区 域 ; 然后 学 习 
口 和 消息 框 ， 后 者 浮动 在 页 面 的 所 有 其 他 内 容 上 方 。 另 外 ， 你 还 将 学 习 标 签 面板 。 

当 学 完 本 章 内 容 时 ， 你 将 能 够 管理 容器 和 它们 子 元 素 完整 的 CRUD ( 创建 、 读 取 、 更 新 和 删 
除 ) 生命 周期 ， 为 以 后 开发 应 用 打下 基础 。 


4.1 面板 


Panel 是 Container 的 子 类 ， 被 视 为 Ext JS 框架 里 的 劳模 ， 因 为 很 多 开发 者 都 用 它 来 展示 
UI 部 件 。 一 个 完全 加 载 的 面板 被 划分 为 6 个 显示 内 容 的 区 域 , 如 图 4-1 所 示 。 你 可 能 还 记得 Panel 
还 是 component 的 子 类 ,这 也 就 意味 着 它 遵从 组 件 的 生命 周期 。 在 后 面 的 内 容 中 , 我 们 要 用 容 
这 个 词 来 表述 任何 container 的 子 类 ， 因 为 我 们 希望 强调 “Panel 是 Container 的 子 类 ”这 
个 概念 。 

面板 的 标题 栏 是 个 很 忙 的 地 方 ， 它 为 最 终 用 户 提供 了 可 视 和 交互 内 容 。 而 在 微软 Windows 系 
统 中 ,可 以 在 面板 的 左上 角 放 置 一 个 图 标 ， 给 用 户 们 提供 信息 ， 比 如 他 们 看 到 的 是 哪 种 面板 。 除 
了 图 标 以 外 ， 还 可 以 在 面板 上 显示 一 个 标题 。 
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图 4-1 一 个 完全 加 载 的 面板 示例 ， 它 有 一 个 带 一 个 图 标 和 多 个 工具 的 
标题 栏 ， 有 一 个 顶部 和 一 个 底部 工具 栏 ， 底 部 还 有 一 个 按钮 栏 

在 标题 栏 最 右边 的 区 域 是 一 个 工具 区 , 这 里 显示 了 一 些微 型 图 标 , 点 击 它们 会 调用 处 理 程序 。 
Ext JS 为 工具 提供 了 很 多 图 标 ， 其 中 包括 很 多 与 用 户 相 关 的 常用 功能 ， 比 如 帮助 、 打 印 和 保存 。 
如 果 要 显示 所 有 可 用 的 工具 ， 就 访问 工具 API 的 type 属 性 。 

在 6 个 内 容 区 中 ,面板 主体 大 概 是 最 重要 的 。 它 是 主要 内 容 或 者 子 元 素 所 在 的 地 方 。 
Container 类 规定 , 一 个 布局 如 果 不 想 用 容器 的 默认 布局 , 就 必须 在 实例 化 的 时 候 指定 布局 。 如 
果 没 有 指定 布局 ， 那 就 要 用 到 AutoLayout 默 认 布 局 管理 器 。 布 局 一 个 很 重要 的 属性 是 ， 一 个 布 
局 不 能 被 动态 转换 为 另 一 个 布局 。 

我 们 来 构建 一 个 复杂 的 面板 ， 它 有 顶部 和 底部 工具 栏 ， 每 个 工具 栏 上 各 有 两 个 按钮 。 


4.1.1 构建 一 个 复杂 的 面板 


为 工具 栏 有 按钮 ， 所 以 当 按 下 按钮 以 显示 反馈 的 时 候 , 最 好 可 以 有 个 方法 调用 。 这 个 方法 
称 为 处 理 程序 : 

















二 




























































































var myBtnHandler = function(btn) { 
Ext .MessageBox.alert ('You Clicked', btn.text); 
} 


当 点 击 任何 工具 栏 的 按钮 时 ,这 个 方法 都 将 被 调用 。 工 具 栏 按钮 会 调用 处 理 程序 ， 并 把 它们 
自身 作为 一 个 引用 btn 传 人 处 理 程序 。 然 后 ， 定 义工 具 栏 ， 如 代码 清单 4-1 所 示 。 


代码 清单 4-1 构建 工具 栏 以 备 在 面板 中 使 用 











var myBtnHandler = function(btn) { 
Ext .MessageBox.alert ('You Clicked', btn.text); ie 
}, 辟 
卜 口 
fileBtn = Ext.create('Ext.button.Button', { 处 理 程序 
text : 'File', 添加 文件 按钮 


handler : myBtnHandler 
os 
editBtn = Ext.create('Ext.button.Button', { 
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tt 


handler 


}), 


LPdit™.; 
: myBtnHandler 


tbFill = new Ext.toolbar.Fill(); 


var myTopToolbar = Ext.create('Ext.toolbar.Toolbar', { 
items : [ a 
fileBtn, 部 工具 栏 
ELLL; 
editBtn 


var myBottomToolbar = [ 


{ 
长 会 关 直 


Text 


}, 


1 


:'Save', 
handler : 


myBtnHandler 


:'Cancel', 
handler : 


myBtnHandler 


'<b>Items open:1</b>' 


] 。 


2 配置 底部 


工具 栏 


代码 清单 4-1 提 供 了 两 种 方法 来 定义 一 个 工具 栏 及 其 子 组 件 。 首 先 定义 myBtnHandlier@， 





每 个 按钮 的 处 理 程序 默认 有 两 个 参数 : Button 对 象 本 身 ， 以 及 用 一 个 Ext .Event 对 象 封装 的 浏 
览 右 事件 。 使 用 传人 的 Button 引 用 (btn )， 并 把 该 文本 传人 Ext .MessageBox.alert, 以 获得 
按钮 被 点 击 的 可 视 确认 信息 。 





接 下 来 实例 化 文件 名 和 编辑 按钮 ， 以 及 “ 贪 焚 ” 的 工具 栏 空白 ， 后 者 会 把 它 后 面 的 所 有 工具 









































栏 元 素 往 右 推 。 把 myTopToolbar 分 配 到 Ext .Toolbar 的 一 个 新 实例 全 , 把 之 前 创建 的 按钮 和 工 
具 栏 空白 ， 引 用 为 新 工具 栏 的 items 数 组 中 的 元 素 。 

对 一 个 相对 简单 的 工具 栏 而 言 ， 这 很 是 大 费 周 章 。 我 们 这 么 做 一 遍 是 为 了 让 你 “感受 ”用 这 
种 老 办 法 编程 有 多 “痛苦 "， 更 深刻 地 体会 到 ExtJS 快 捷 方 式 和 XType 能 节省 多 少时 间 ( 和 最 终 开 

















发 代码 )。 




















myBottomroolbar 和 @@ 引 用 是 一 个 对 象 和 字符 串 组 成 的 简单 数组 ， 当 它 的 父 容器 觉得 必要 的 
时 候 把 该 数组 转化 为 恰当 的 对 象 。 你 会 








日 这 两 个 方法 在 两 个 工具 栏 上 动态 地 添加 或 者 删除 元 素 。 


接 下 来 要 创建 面板 主体 : 
Var myPanel = Ext.create('Ext.panel.Panel', { 

width 00% 

height 2 SQ; 

title : 'Ext Panels rock!', 
collapsible : true, 

renderTo : Ext .getBody () ， 

七 Da : myTopToolbar, 
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bbar : myBottomToolbar, 
html : 'My first Toolbar Panel!' 
Fs 


你 以 前 创建 过 面板 ， 这 里 的 所 有 代码 看 起 来 都 应 该 很 熟悉 ， 除 了 tbar 和 pbbar 这 两 个 属性 ， 
它们 引用 了 新 创建 的 工具 栏 。 男 外 ， 还 有 一 个 collapsible 属 性 ， 当 collapsible 设 置 为 true 
的 时 候 ， 面 板 会 在 标题 栏 的 右上 方 创建 一 个 开关 按钮 。 泻 染 过 后 ， 面 板 的 外 观 应 该 是 如 图 4-2 所 
示 。 记 住 ， 点 击 任何 一 个 工具 栏 按钮 ， 都 会 导致 跳出 一 个 Ext .MessageBox 显 示 按 钮 上 的 文本 ， 
反馈 点 击 处 理 程序 被 调用 的 确认 信息 。 


我 的 顶部 Ext Panels rock! 佐 
工具 栏 
Rd File Edit Ds 折合 开 


关 按 钮 


























My first Toolbar Panel! 


我 的 底部 
工具 习 


二 AS 








Save Cancel Items open: 1 














图 4-2 ”代码 清单 4-1 泻 染 后 的 结果 ,创建 了 一 个 复杂 的 可 折 炙 面板， 顶部 和 
底部 工具 栏 上 分 别 都 含有 按钮 
在 图 4-2 中 渲染 的 工具 栏 分 别 被 置 于 内 容 体 的 上 方 和 下 方 。 这 一 过 程 称 为 停靠 ( docking ), 是 
由 Dock 组 件 布局 类 来 管理 的 。 我 们 将 在 4.1.2 节 深入 探讨 停靠 。 














4.1.2 ”添加 按钮 和 工具 


工具 栏 是 放置 面板 主体 以 外 的 内 容 、 按 钮 和 菜单 的 好 地 方 。 有 两 个 部 分 仍 有 待 学 习 : 按钮 和 
工具 。 要 在 下 面 的 代码 清单 中 往 myPanel 示 例 添加 按钮 和 工具 ， 但 要 使 用 Ext JS 快捷 方式 ， 以 及 
内 能 了 所 有 其 他 配置 选项 的 XType。 


代码 清单 4-2 ”向 现存 的 面板 上 添加 按钮 和 工具 
Var myPanel = Ext.create('Ext.panel.Panel', { 
// height、weight 和 renderTo 属 性 人 
buttonAlign : 'left', 
buttons Co 





text : 'Press mel!l', 
handler : myBtnHandler 


} > 配置 工具 
jy 


type : 'gear', 

handler : function(evt, toolEl, panel) { 
var toolClassNames toolEl.className.split(' '); 
var toolClass toolClassNames[1]; 
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var toolId = OO0lCLaSe. SPLlit( = [2]; 
Ext .MessageBox.alert ('You Clicked', 'Tool ' + toolId); 
} 
}, 
{ 
Type yp 
handler : function() { 
Ext .MessageBox.alert('You Clicked', 'The help tool'); 


} 
} 

] 

在 代码 清单 4-2 中 ， 往 之 前 的 配置 选项 中 引入 了 两 个 快捷 方式 数组 : 一 个 用 于 按钮 ， 另 一 个 
用 于 工具 。 因 为 指定 了 一 个 buttons 数 组 @, 在 面板 泻 染 的 时 候 ， 它 会 创建 一 个 新 的 带 有 一 个 特 
殊 的 CSS 类 x-toolbar-footer-dockedq-bottom 的 Ext.Toolbar 实 例 ， 然 后 把 它 泻 染 到 新 创 
建 的 页 脚 Qiv 上 。 “点 我 ! ”按钮 会 被 泻 染 在 新 创建 的 页 脚 工 具 栏 上 ， 而 当 点 击 该 按钮 时 ， 它 会 触 
发 你 之 前 定义 的 myBtnHandler 方 法 。 

如 果 观 察 代 码 清 单 4-1 里 的 myBottomToolbar 快 捷 方 式 数 组 和 代码 清单 4-2 里 的 buttons 快 
捷 方 式 数组 ， 你 会 看 到 一 些 相似 之 处 。 所 有 的 面板 工具 栏 (tbar、bbar 和 buttons ) 都 可 以 用 
相同 的 便捷 语法 定义 ， 因 为 它们 都 将 被 转化 为 Ext .Toolbar 的 实例 ， 并 演 染 到 它们 在 面板 中 的 
相应 位 置 。 

你 还 指定 了 一 个 tools 数 组 @@ 配 置 对 象 , 这 跟 定义 工具 栏 的 方式 有 些 不 同 。 在 这 里 要 为 工具 
设置 图 标 ， 必须 指 定 工具 的 iq， 比 如 'gear' 或 'help'。 该 数组 中 指定 的 每 个 工具 中 都 会 创建 一 
个 图 标 。Panel 类 将 为 每 个 工具 分 配 一 个 点 击 事件 处 理 程序 , 它 将 调用 该 工具 的 配置 对 象 中 指定 
的 处 理 程序 。 新 修改 的 myPanel 演 染 后 的 版 本 应 该 如 图 4-3 所 示 。 






























































Ext Panels rock! 9 
File Edit 新 添加 
的 工具 
My first Toolbar Panel! 
新 添加 
的 按钮 
Press mel 
Save Cancel Items open: 1 





图 4-3 ”代码 清单 4-2 演 染 后 的 结果 ， 往 按钮 栏 添加 了 一 个 按钮 ， 往 标题 栏 添加 了 工具 
你 可 以 看 到 为 该 面板 配置 的 按钮 ,但 有 些 不 对 劲 。 底 部 的 工具 栏 被 演 染 在 了 按钮 栏 的 下 方 ， 
需要 大 修 大 补 。 这 给 了 我 们 一 个 绝 佳 的 机 会 , 来 深入 探讨 Panel 类 如 何 使 用 Dock 组 件 布局 演 染 内 
容 体 上 方 、 下 方 ， 其 至 是 左 侧 和 右 侧 的 元 素 。 
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4.1.3 在 一 个 面板 上 停靠 元 素 


Dock 布 局 是 Panel 类 特有 的 布局 , 作用 是 把 一 个 或 者 多 个 组 件 泻 染 在 面板 内 容 体 左 右 任 意 一 
侧 。 当 在 代码 清单 4-2 中 为 面板 配置 tbar 和 bbar 属 性 的 时 候 , 面板 实质 上 就 是 在 内 部 把 配置 推送 
入 所 谓 的 dockedItems。Dock 布 局 的 作用 是 组 织 排 列 每 一 个 基于 weighnt 属 性 的 部 件 。 稍 后 我 们 
再 来 探讨 weight 属 性 ， 首 先 我 们 要 让 你 看 到 组 件 停靠 的 灵活 性 有 多 大 。 

不 用 为 一 个 面板 配置 tbar 和 bbar (或 者 lbar 和 rbar ) 属性 ， 而 是 可 以 把 dockedItems 配 
置 为 一 个 工具 栏 配 置 选项 的 数组 。 这 么 做 可 以 把 所 有 停靠 元 素 保存 在 单个 配置 集合 中 。 

接 下 来 这 个 代码 清单 展示 了 如 何不 用 tbar 而 用 dockedItems， 把 单个 项 部 停靠 工具 栏 停靠 
在 面板 上 。 我 们 会 尽 可 能 地 让 代码 保持 简单 。 


代码 清单 4-3 ”顶部 停靠 单个 工具 栏 
















































































Var buttons = [ 
上 3 PEE TY 3 i 
{ text : 'Btn 2°' }, 添加 按钮 
{text, "BEN. 23) 
] 
Var topDockedToolbar = { 
xtype : 'toolbar', a 
dock :MEOD,; 靠 工 具 栏 
items : buttons 
Var myPanel = Ext.create('Ext.panel.Panel', { 
width 50 
height 3 
title : 'Ext Panels rock!', 
renderTo : Ext .getBody(), 
html : 'Content body', Ee 
buttons 人 
items : buttons 
Fi 
dockedItems : | 
topDockedToolbar “ 设置 停靠 元 素 


] 
ss 


在 代码 清单 4-3 中 ， 首 先 设置 了 一 个 可 重用 的 按钮 配置 对 象 集合 @Q@。 这 么 做 可 以 在 稍 后 添加 
更 多 工具 栏 的 时 候 轻 松 地 演 染 按钮 。 

然后 创建 一 个 顶部 停靠 的 Toolbar 配 置 对 象 介 。 它 之 所 以 停靠 在 顶部 ， 是 因为 设置 的 dock 
属性 。 后 面 可 以 看 到 ，qock 属 性 其 他 可 能 赋 的 值 有 bottom、 left 和 right。 

最 后 ， 演 染 一 个 面板 ， 给 它 配 置 一 个 buttons 配 置 对 象 全 和 一 个 dockedItems 数 组 他， 该 
数组 包含 单个 元 素 topDockedToolbar。 面 板 在 屏幕 上 的 泻 染 结 果 应 该 如 图 4-4 所 示 。 
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Ext Panels rock! 





Btn1 Btn2 Btn3 
Content body 
Btn 1 Btn 2 Btn 3 
图 4-4” 带 顶部 停靠 工具 栏 的 面板 























目前 为 止 ， 除 了 给 面板 配置 tbar 和 buttons 属 性 




















以 外 ， 你 还 没有 看 到 新 东西 。 所 以 接 下 来 ， 


要 添加 左 侧 停靠 、 右 侧 停靠 和 底部 停靠 的 工具 栏 。 要 把 相关 代码 搬 和 人 到 面板 的 上 方 : 

Var bottomDockedToolbar = { 
xtype : 'toolbar', 
dock : 'bottom’', 
items : buttons 

hs 

Var leftDockedToolbar = { 
xtype :toolbart, 
vertical : true, 
dock Ef 
items : buttons 

var rightDockedToolbar = { 
xtype EGOLbDar", 
vertical : true, 
dock so LONE 
items : buttons 








从 这 一 段 代 码 中 ， 应 该 能 可 以 看 出 某 种 模式 来 。gdock 属 性 决定 工具 栏 
vertical 设 置 为 Lrue, 工具 栏 就 知道 用 VBox 布 局 ( 垂直 排列 组 件 ), 而 不 是 
平 排列 组 件 )。 

接 下 来 要 为 面板 的 dockedItem 属 性 添加 工具 栏 : 

dockedItems :[ 

topDockedToolbar, 
bottomDockedToolbar, 


leftDockedToolbar, 
rightDockedToolbar 





























] 
在 面板 泻 染 中 用 这 种 方法 更 改 dockedItems 的 结果 如 图 4-5 所 示 。 


Dy 








各 被 停靠 在 哪儿 。 把 
默认 的 HBox 布 局 (水 
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Ext Panels rock! 


Btn1 Btn2 Btn3 
Btn 1 Content body Btn 1 


Btn 2 Btn 2 
Btn 3 Btn 3 


Btn1 Btn 2 Btn 3 


图 4-$ 把 停靠 工具 栏 泻 染 到 面板 的 全 部 4 个 象限 


在 面板 内 容 体 的 四 面 都 停 乱 了 元 素 , 但 按钮 栏 放 错 了 地 方 。 另 外 , 我们 希望 底部 停靠 的 工具 
栏 能 跟 顶 部 停靠 的 工具 栏 宽度 相同 。 
为 了 修正 这 些 问 题 ， 必 须要 调整 停靠 元 素 的 权重 。 


4.1.4 权重 很 重要 

之 所 以 在 尺寸 方面 遇 到 问题 ， 是 因为 Ext JS 框架 根据 每 个 停靠 元 素 的 默认 权重 泻 染 了 它们 并 
设 定 了 它们 的 尺寸 。 要 了 解 权重 的 原理 ， 可 以 想象 重力 在 现实 世界 中 是 怎样 的 。 

一 个 物体 的 重量 越 大 , 它 就 越 接近 与 重力 源 。 在 Dock 布 局 中 , 权重 越 大 的 组 件 会 被 泻 染 在 越 
靠近 内 容 体 的 地 方 ， 权 重 越 小 的 停靠 元 素 其 设 定 尺 寸 的 优先 级 越 高 。 

最 后 ， 在 下 面 的 这 个 代码 清单 中 ， 我 们 将 展示 完整 的 代码 ， 其 中 包括 按钮 栏 和 4 个 停靠 工具 
栏 ， 因 为 要 循序 渐进 地 对 代码 进行 改动 。 
代码 清单 4-4” 带 4 个 停靠 工具 栏 和 一 个 按钮 栏 的 面板 


Var buttons = [ 







































































{ text * Btn 1 3s 
下 
,Cext ,SS BEIY 3S、 


J 


var topDockedToolbar = { 


xtype + tolDar 
dock 和 
items : buttons 


Var bottomDockedToolbar = { 


xtype :tonlDbart, 
dock :'bottom', 
items : buttons 


var leftDockedToolbar = { 
xtype : "toolbar"; 
vertical : true, 
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dock : TLeft; 
items : buttons 

站 

Var rightDockedToolbar = { 
xtype s LoolbDar., 
vertical : true, 
dock :ELONE 
items : buttons 


Var myPanel = Ext.create('Ext.panel.Panel', { 


width :SID 

height 20 

title : 'Ext Panels rock!', 

renderTo : Ext.getBody(), 

html : 'Content body', 

buttons : buttons, 

dockedItems : [ 
topDockedToolbar, 
bottomDockedToolbar, 
leftDockedToolbar, 
rightDockedToolbar 











要 解决 的 第 一 个 问题 是 按钮 栏 的 尺寸 和 位 置 设 定 错误 。 为 了 解决 这 个 问题 ,必须 改变 面板 的 
buttons 属 性 配置 方式 。 








buttons :{ 
weight : -1, 
items : buttons 


}, 








在 这 里 把 puttons 数 组 引用 封装 在 一 个 weight 属 性 为 -1 的 对 象 里 。 当 面板 初始 化 时 ， 它 会 
识别 出 buttons 属 性 是 一 个 对 象 ， 用 它 创建 一 个 工具 栏 的 新 实例 ， 设 置 自 定义 的 weight 属 性 。 
因为 给 weignt 属 性 赋值 -1， 权 重 被 视 为 极 小 ， 所 以 它 将 被 泻 染 在 底部 停靠 的 工具 栏 下方 。 图 4-6 
展现 了 泻 染 后 的 样子 。 






































Ext Panels rock! 


Btn1 Btn2 Btn3 
Btn 1 Content body 


Btn 1 
Btn 2 Btn 2 
Btn 3 Btn 3 
Btn1 Btn2 Btn3 
Btn1 Btn 2 Btn 3 


图 4-6 ”正确 演 染 停靠 元 素 
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要 解决 的 下 一 个 问题 是 左 侧 停靠 和 右 侧 停靠 的 工具 栏 的 尺寸 设 定 问题 。 要 加 大 左 侧 停 靠 和 右 
侧 停 靠 工 具 栏 的 权重 ， 而 不 是 减 小 底部 停靠 的 工具 栏 的 权重 。 为 此 要 把 下 面 的 属性 添加 到 
leftDockedToolbar 和 rightDockedToolbar 配 置 对 象 上 : 


























weight :10, 








把 新 配置 的 weight 属 性 添加 到 左 侧 停靠 和 右 侧 停靠 的 工具 栏 配置 对 象 ， 可 以 确保 底部 停靠 
工具 栏 演 染 时 尺寸 正确 ， 如 图 4-7 所 示 。 可 以 看 到 ， 添 加 weight : 10 到 左 侧 停 靠 和 右 侧 停靠 的 
工具 栏 配置 对 象 ， 可 以 让 底部 停靠 的 工具 栏 占据 面板 宽度 的 100%。 





Ext Panels rock! 
Btn1 Btn2 Btn3 
Btn 1 Content body 


Btn 2 Btn 2 


Btn 3 Btn 3 


Btn1 Btn2 Btn3 


Btn 1 Btn2 Btn3 





图 4-7 ”修正 底部 停靠 按钮 栏 


神奇 的 数字 10? 

你 可 能 要 问 为 什么 把 左 侧 停靠 和 右 侧 停靠 工具 栏 的 weight 属 性 设 为 10 ,而 不 是 其 他 数字 ， 
比如 50 或 者 100。 之 所 以 用 10 是 因为 元 素 停 靠 的 每 个 象限 都 有 一 个 默认 权重 。 顶 部 是 1， 左 侧 
是 3， 右 侧 是 5， 底 部 是 7。 之 所 以 用 10， 是 因为 它 是 一 个 比 7 (底部 停靠 ) 大 的 约 整数 。 





我 们 鼓励 你 多 多 把 玩 这 段 代码 ,在 每 个 区 域 添加 超过 一 个 停靠 元 素 ,调整 其 权重 。 在 此 过 程 
中 ， 请 记 住 可 以 往 面 板 上 停靠 其 他 component 子 类 。 

现在 你 有 了 一 些 关 于 Panel 的 经 验 ， 我 们 来 看 看 它 最 近 的 子 类 之 一 : Window， 可 以 用 它 把 
内 容 浮 动 在 屏幕 上 的 所 有 其 他 内 容 上 方 ， 蔡 代 传统 的 基于 浏览 器 的 弹出 式 窗 口 。 

















4.2 ”显示 窗口 对 话 框 


窗口 UI 部 件 建立 在 面板 之 上 ,所 以 可 以 把 UI 组 件 浮动 在 页 面 上 的 所 有 其 他 内 容 上 方 。 利 用 
窗口 可 以 生成 一 个 模 态 对 话 框 ,屏蔽 整个 页 面 ， 人 迫使 用 户 把 焦点 放 在 对 话 框 上 ,阻止 与 页 面 上 
其 他 部 分 发 生 基于 鼠标 的 交互 。 图 4-8 展 现 了 怎么 用 这 个 类 来 获得 用 户 的 注意 并 请 求 输入 。 

使 用 window 类 跟 使 用 Pane1 类 很 像 是 ,不同 的 是 必须 要 考虑 一 些 问题 ， 比 如 是 不 是 想 关 闭 
调整 矿 才 功能， 或 者 想 不 想 把 窗口 局 限 在 浏览 器 视 口 的 范围 内 。 
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OO Complex Layout 三 | 


north ~ generally for menus, toolbars and/or advertisements 





West « Close Me Center F East Side » 
eon > | Done reading me? Close me 0 Name Ma 
by clicking the X in the top (name) Properties Grid 


Hi. I'm the west panel， 0 
right corner. 
autoFitColumns true 





| Input required X| | borderWidth 1 
Please enter a new borderWidth value created 10/15/2006 
grouping false 
| productionQuality false LS 
| OK Cancel | 
天 | tested false 
sollicitudin, mauris. Aliquam mi version 0.01 
velit, consectetuer mattis, A 
Settings consequat tristique, pulvinar 了 | ATab | property Grid 
South 


south - generally for informational stuff, also could be for status bar 





图 4-8 一 个 Ext JS 模 态 窗口 ， 它 屏蔽 了 浏览 器 的 视 口 





4.2.1 构建 一 个 窗口 


我 们 来 深究 一 下 怎么 构建 一 个 窗口 。 为 此 需要 一 个 没有 加 载 部 件 的 基础 的 Ext JS 页 面 ， 


下 代码 清单 所 示 。 
代码 清单 4-5 ”构建 动画 窗口 


var win; 


Var newWindow = function(pbtn) { 
if (!win) { 人 


win = Ext.create('Ext.window.Window', { 
animateTarget : btn.el, 


html : 'My first vanilla Window', 
closeAction : 'hide', 
工地 Ca oR 
height 200, 
width 2-300 
constrain : true ow 约束 Window 
、 )) 1 实例 
win.show() 
} 
new Ext.Button(t{ 
renderTo : Ext.getBody(), a 创建 按钮 
text : 'Open my Window', 
style : "margirn:100px', 


handler : newWindow 


如 以 
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这 个 代码 清单 里 的 做 法 略 有 不 同 , 为 的 是 看 到 调用 窗口 close 和 hiae 方 法 的 动画 。 要 做 的 第 
一 件 事 是 创建 一 个 全 局 变量 win， 将 用 它 来 引用 即将 创建 的 窗口 。 创 建 一 个 方法 newWindow@， 
它 将 成 为 要 创建 的 按钮 的 处 理 程序 ， 负 责 生 成 新 的 窗口 。 

我 们 先 花 点 时 间 来 看 一 下 窗口 的 一 些 配 置 选项 。 通 过 调用 窗口 的 show 和 hige 方 法 生成 动画 
效果 的 方法 之 一 ， 是 制定 一 个 animateE1 属 性 ， 它 是 对 DOM 的 某 个 元 素 或 者 元 素 ID 的 引用 。 如 
果 不 在 配置 选项 中 指定 元 素 ， 可 以 在 调用 show 或 者 hi ae 方法 的 时 候 指 定 它 ， 它 们 的 参数 相同 。 
在 这 里 指定 的 是 按钮 的 元 素 。 男 一 个 重要 的 配置 选项 是 closeAction, 它 的 默认 值 是 close, 当 
点 击 关闭 工具 (x ) 的 时 候 销 毁 窗口 。 你 不 想 它 出 现在 这 个 实例 中 ， 所 以 把 它 设 为 hide， 指 示 关 
闭 工 具 调 用 hi ae 方 法 而 不 是 close 方 法 。 还 把 constrain 参 数 @ 设 为 了 true， 这 指示 窗口 的 拖 
放 人 处 理 程序 防止 窗口 被 移动 到 浏览 器 的 视 口 范围 以 外 。 

最 后 ,创建 一 个 按钮 回 , 点 击 它 会 调用 newwingdow 方 法 ,从 而 使 窗口 根据 按钮 的 元 素 生 成 动 
画 效 果 。 点 击 关闭 工具 能 使 窗口 隐藏 。 泻 染 后 的 结果 如 图 4-9 所 示 。 


















































































































































My first vanilla Window 
Open my 























图 4-9 ”代码 清单 4-3 的 泻 染 结果 ， 你 在 其 中 创建 了 一 个 窗口 ， 
点 击 按钮 时 根据 按钮 的 元 素 生 成 动画 效果 


因为 在 点 击 关闭 工具 的 时 候 没有 销毁 窗口 , 所 以 可 以 重复 地 显示 和 隐藏 窗口 。 当 有 必要 销 筑 
窗口 的 时 候 ， 可 以 调用 它 的 aestroy 或 者 close 方 法 。 现 在 你 已 经 有 了 创建 可 重用 窗口 的 经 验 ， 
可 以 开始 探索 其 他 配置 选项 ， 以 进一步 改变 窗口 的 行为 。 





















































4.2.2 更 多 窗口 配置 

很 多 情况 下 需要 让 一 个 窗口 执行 某 项 操作 以 满足 应 用 的 要 求 。 本 节 将 带 你 学 习 一 些 常 用 的 配 
置 选 项 。 

有 时 候 要 生成 一 个 模 态 和 刚性 的 窗口 ， 为 此 需要 设置 几 个 配置 选项 ， 如 以 下 代码 清单 所 示 。 
代码 清单 4-6 ”创建 一 个 刚性 模 态 窗口 


Var win = Ext.create('Ext.window.Window', { 


height i 人 确保 页 面 
width : 200, 被 屏蔽 
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modal 

Cit 

html 

plain 
border 
resizable 
draggable 
closable 
buttonAlign 
buttons 


{ 


text 
handler : 


} 


] 
}) 


win.show(); 


;tees 


'This is one rigid window', 
'Try to move or resize me.I dare you.', 


: true, 
: false, 
: false, 
: false, 
: false, 
'Ccenter', 


[ 


'I give up!', 





防止 调整 
尺寸 


le 禁用 窗口 移动 


function() { 防止 窗口 关闭 


win.close(); 


在 代码 清单 4-6 中 ， 创 建 了 一 个 极其 严格 的 模 态 和 窗口。 必须 设置 好 几 个 选项 。 第 一 个 选项 
modal@， 指 示 窗 口 用 一 个 半 透 明 的 div 屏蔽 页 面 的 其 他 内 容 。 然 后 把 resizable@ 设 置 为 


false， 这 可 以 防止 通过 
aragdable 各 设 为 false。 








可 以 让 内 容 体 背景 变 透 明 。 如 果 

















鼠标 操作 调整 窗口 的 尺寸 。 为 了 防止 


窗口 被 在 页 面 上 拖 来 拖 去 ， 把 














只 要 一 个 中 心 按钮 来 关闭 窗口 , 所 以 把 closeable 和 @@ 设 为 false,， 隐 
藏 关闭 工具 。 最 后 , 设置 一 些 修饰 性 参数 , plain、border 和 buttonAlign。 把 plain 设 为 true 























巴 border 设 为 false， 那 窗口 就 会 呈现 为 一 个 统一 的 单元 。 


因为 想 让 那个 按钮 置 于 中 央 ， 所 以 把 buttonAlign 属 性 指定 为 'center'。 演 染 后 的 示例 应 该 如 


图 4-10 所 示 。 





图 4-10 





This is one rigid window 


Try to move or resize me. I dare you. 


| give up! 


在 Ext JS SDK 的 feed viewer 示 例 中 演 染 的 第 


| 


一 个 严格 的 模 态 窗口 
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还 有 些 时 候 希 望 在 窗口 上 放松 限制 。 比 如 说 ， 有 些 情况 下 需要 一 个 可 以 调整 尺寸 的 窗口 , 但 
不 能 小 于 特定 的 尺寸 。 为 此 要 人 允许 调整 尺寸 (resizable )， 并 限定 minwidth 和 minHeight 参 
数 。 可 惜 的 是 ， 要 设 定 窗口 尺寸 的 上 限 没有 捷径 可 走 。 
虽然 创建 你 自己 的 窗口 有 很 多 原因 ， 有 时 候 需 要 一 个 快速 粗暴 的 原因 ， 比 如 说 ， 显 示 一 条 用 
户 数 据 的 信息 或 者 提示 框 。window 类 有 一 个 子 类 Mes sageBox 可 满足 这 一 需求 


4.3 ”消息 框 


MessageBox 是 一 个 可 重用 而 又 多 用 途 的 单 例 类 ， 借 此 可 以 用 一 个 简单 的 方法 调用 来 替换 部 
分 基于 浏览 需 的 常用 消息 框 ， 比 如 alert 和 prompt。 关 于 MessageBox 类 要 了 解 的 最 重要 的 一 点 
是 , 它 并 不 像 传 统 的 警告 框 或 者 提示 框 那样 阻止 JavaScript 执 行 , 这 我 们 认为 是 好 事 。 在 用 户 领会 
或 者 输入 信息 的 同时 ， 代 码 可 以 执行 Ajax 查询 甚至 可 以 操作 UI。 指 定 后 的 MessageBox 将 在 窗口 
关闭 的 时 候 执行 一 个 回调 方法 。 
























































4.3.1 警告 用 户 
在 开始 使 用 MessageBox 类 之 前 ， 让 我 们 来 创建 一 个 回调 方法 。 你 稍 后 会 用 得 着 : 


Var myCallback = function(btn, text) { 


console.info('You pressed ' + btn); 
if (text) { 
console.info('You entered :' + text) 


} 
} 
myCallback 方 法 将 使 用 Firebug 的 控制 台 来 回 显 任何 点 击 的 按钮 和 输入 的 文字 。Message- 
Box 只 会 向 回调 方法 传人 两 个 参数 : 按钮 ID 和 输入 的 任意 文本 。 既 然 有 了 回调 方法 ， 让 我 们 来 弹 


出 一 个 警告 消息 框 : 





Var msg = 'Your document was saved successfully'; 

Var title = 'Save status:' 

Ext .MessageBox.alert (title, msg); 

在 这 里 调用 MessageBox.alert 方 法 , 后 者 会 弹出 一 个 窗口 ( 见 图 4-11， 左 图 )， 当 点 击 OK 
按钮 时 会 关闭 该 窗口 。 如 果 想 在 关闭 窗口 时 执行 nycallback， 就 把 它 添加 为 第 三 个 参数 。 








Save status: x Input Required x 
Your document was saved successfully Please enter your email address. 
OK OK Cancel 








图 4-11 MessageBox 的 警告 框 ( 左 ) 和 提示 框 ( 右 ) 模 态 对 话 窗 





已 
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现在 我 们 已 经 看 过 警告 框 ， 








和 来 看 看 如 何 用 MessageBox.prompt 方 法 来 请 求 用 户 输入 : 














var msg = 'Please enter your email address.';} 

Var title = 'Input Required' 

Ext .MessageBox.prompt (title, msg, myCallback); 

调用 MessageBox.prompt 方 法 ， 把 回调 方法 的 引用 传 进去 ， 效果 如 图 4-11 ( 右 ) 所 示 。 输 
人 一 些 文本 ， 然 后 点 击 Cancel。 在 Firebug 控 制 台 中 ， 你 将 看 到 点 击 的 按钮 ID 和 输入 的 文本 。 

这 就 是 MessageBox 和 警告 框 和 提示 框 窗 口 。 我 们 会 发 现 这 些 窗口 很 方便 ， 因 为 不 用 自行 创建 
单 例 实例 来 生成 这 些 UI 部 件 。 当 要 实施 一 个 window 类 满足 需求 的 时 候 记 得 用 它们 。 

我 们 要 坦白 一 个 小 秘密 。alert 和 prompt 方 法 实际 上 都 是 比 它们 大 得 多 而 且 可 配置 性 极 强 
的 MessageBox.show 方 法 的 快捷 方法 。 接 下 来 这 个 示例 将 告诉 你 ,如何 使 用 show 方 法 显示 一 个 
带 图 标的 多 行文 本 框 。 
























































4.3.2 MessageBox 的 高 阶 方法 


MessageBox.show 方 法 提供 了 一 个 接口 ， 让 你 可 以 用 24 个 可 选项 的 任意 组 合 来 显示 
MessageBox。 和 之 前 我 们 学 习 过 的 快捷 方法 不 同 ，show 接 受 典型 的 配置 对 象 作 为 其 参数 。 让 我 
们 来 展现 一 个 带 图 表 的 多 行文 本 框 : 


Ext .Msg.show!(t{ 


title : 'Input required:', 

msg : 'Please tell us a little about yourself', 
width “300 

buttons : Ext.Msg .OKCANCEL, 

multiline : true, 

fn : myCallback, 

exo en : Ext.MessageBox.INFO 


}); 


在 演 染 以 上 示例 的 时 候 ， 它 会 显示 一 个 模 态 对 话 术 
看 看 如 何 创建 一 个 包含 一 个 图 表 和 三 个 按钮 的 警告 框 : 


Ext .Msg.show!(t{ 


TH 





， 如 图 4-12 ( 左 ) 所 示 。 接 下 来 ， 我 们 来 





title : 'Hold on there cowboy!', 

msg : 'Are you sure you want to reboot the internet?', 
width 2 OD 

buttons : Ext.Msg .YESNOCANCEL, 

fn : myCallback, 

icon : Ext.MessageBox.ERROR 


ys 


以 上 代码 示例 奖 显示 三 按钮 模 态 警告 框 窗口 ， 如 图 4-12 ( 右 ) 所 示 。 

虽然 这 两 个 自 定 义 MessageBox 示 例 中 的 所 有 代码 都 是 不 言 自明 的 ， 我 们 觉得 还 是 很 有 必要 
着 重 谈 一 下 往 MessageBox 公 共 属 性 中 传人 引用 的 两 个 配置 选项 。 

buttons 参 数 用 于 告知 单 例 实 例 应 该 显示 哪些 按钮 。 虽 然 传 人 了 一 个 现存 属性 Ext . 

















[em 
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MesageBox.OKCANCEL 的 引用 ， 也 可 以 通过 把 buttons 设 置 为 一 个 空 对 象 ， 比 如 {}， 以 不 显示 
任何 按钮 。 














Input required: Xx 
ny S 
i) Please tell us a little about yourself Hold on there cowboy! x 
Are you sure you want to reboot the 
internet? 
Yes No Cancel 
OK Cancel 








图 4-12 一 个 带 图 标的 多 行 输入 框 ( 左 ) 和 一 个 三 按钮 图 标 警 告 框 ( 右 ) 


如 果 想 只 显示 按钮 ,但 不 自 定 义 文本 , 那 单 例 实 例 已 经 拥有 一 套 预定 义 的 常用 组 合 : CANCEL、 
OK、 OKCANCEL、 YESNO 和 YESNOANCEL。 

此 外 ， 你 还 可 以 自 定义 想 要 显示 的 按钮 。 但 并 不 是 把 buttons 设 置 为 一 个 属性 ， 而 是 设置 
buttonText。 比如 , 要 显示 Yes 和 Cancel 按 钮 , 就 把 puttonText 设 置 为 { yes :'Sure thing!'， 
cancel :'No way!'}， 其 中 对 象 的 键 是 按钮 的 ID ， 而 字符 串 是 按钮 的 显示 文本 。 

icon 参 数 跟 buttons 参 数 的 使 用 方法 相同 ， 只 不 过 它 是 对 一 个 字符 串 的 引用 。MessageBox 
类 有 三 个 预定 义 的 值 ，INFO、QUESTION 和 WARNING。 它 们 是 对 身 为 CSS 类 的 字符 串 的 引用 。 如 
果 希 望 显 示 你 自己 的 图 标 ， 就 创建 自己 的 CSS 类 ， 并 把 自 定义 CSS 类 的 名 称 作为 icon 参 数 传人 。 
以 下 是 一 个 自 定义 CSS 类 的 示例 : 





































































































.icon-add { 
background-image: url(/path/to/add.png) !important; 
} 


现在 你 已 经 亲身 尝试 了 一 些 MessageBox 的 高 阶 方法 ， 我 们 可 以 探索 如 何 用 MessageBox 来 
显示 一 个 动画 对 话 框 了 ， 后 者 可 以 给 用 户 提供 关于 某 一 特定 过 程 的 实时 最 新 信息 。 


4.3.3 显示 一 个 动画 式 等 待 对 话 框 


当 需 要 停止 一 个 特定 的 工作 流 时 , 必须 显示 某 种 模 态 消息 框 , 它 可 以 非常 简单 枯燥 ,就 像 一 
个 带 有 “Please wait” 消 息 的 模 态 对 话 框 。 我 们 希望 能 给 这 个 应 用 增加 一 点 趣味 ,设计 一 个 动画 
式 的 “等 待 ”对 话 框 。 可 以 利用 MessageBox 类 创建 一 个 看 似 毫 不 费力 的 无 限 循环 进度 条 : 





























Ext .MessageBox.wait ("We're doing something...", 'Hold on...'); 

这 条 代码 会 生成 一 个 等 待 对 话 框 ， 如 图 4-13 所 示 ( 左 )。 如 果 这 里 的 语法 看 似 有 点 奇怪 ， 那 
是 因为 第 一 个 参数 是 消息 主体 文本 ,而 第 二 个 参数 是 标题 ,这 跟 警 告 框 和 提示 框 的 调用 正好 相反 。 
如 果 想 在 动画 进度 条 本 身 的 主体 内 显示 文本 ， 可 以 把 单个 文本 属性 作为 第 三 个 参数 传人 ， 比 如 
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{text:'loading your items'}。 图 4-13 ( 右 ) 展现 了 把 进度 条 文本 添加 到 虚拟 等 待 对 话 框 
里 的 样子 。 





ti 





Hold on... Hold on... 


We're doing something... We're doing something... 


ing your items 

















图 4-13 一 个 简单 的 动画 MessageBox 等 待 对 话 框 ， 进 度 条 以 一 个 预 设 的 固定 时 间 间 
隔 进 行 无 限 循环 ( 左 ) ， 以 及 一 个 进度 条 中 有 文本 的 类 似 的 消息 框 ( 右 ) 




















虽然 这 乍 一 看 似乎 很 酷 ， 但 其 实 没 有 交互 ， 因 为 文本 是 静态 的 ， 并 没有 控制 进度 条 的 状态 。 
可 以 使 用 方便 的 show 方 法 并 传人 一 些 参数 ,来 自 定义 等 待 对 话 框 。 使 用 这 个 方法 就 可 以 有 足够 
的 余地 来 随时 随地 更 新 进度 条 的 进度 。 要 创建 一 个 自动 更 新 的 等 待 对 话 框 , 必须 创建 一 个 相当 复 
杂 的 循环 ( 如 以 下 代码 清单 所 示 )， 所 以 请 继续 看 下 去 。 


代码 清单 4-7 创建 一 个 动态 更 新 的 进度 条 


Ext .MessageBox.show!(t{ 














title : 'Hold on there cowboy!', 
msg : "We're doing something...", 
progressText : 'Initializing...', 
width :4 B00 
progress : true, 显示 进度 条 
closable : false 
} 
var updaterFn = function(num) { 
return function(){ 
if (num == 6){ 


Ext .MessageBox.updateProgress (100, 
'All Items saved!'); 
Ext .Function.defer (Ext .MessageBox.hide, 
1500, Ext.MessageBox); 
} 


elsel{ 
var i = num/6; 
var pct = Math.round(100 * 1); 更 新 百分比 、 
Ext .MessageBox.updateProgress (i, 文本 
pct + '%$ completed'); 
} 
上 
这 
for (var 1 .= 13 1 < 7 i144)1{ 
setTimeout (updateFn(i), i * 500); a 添加 循环 数 0.5 秒 时 
} 间 间 隔 





在 代码 清单 4-7 中 创建 一 个 消息 杠 ，progress 选 项 @ 设 为 Lrue， 会 显示 进度 条 。 然 后 定义 
一 个 非常 复杂 的 更 新 需 函 数 ， 名 为 updateFn， 并 以 一 个 预定 义 的 时 间 间 隅 进行 调用 。 在 这 个 函 
数 中 ， 如 果 传 人 的 数字 等 于 上 限 6， 就 把 进度 条 更 新 至 100% 宽 ， 并 显示 完成 文本 。 还 把 消息 框 的 
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关闭 推迟 了 1. 否则 要 计算 一 个 完成 百分比 ， 并 相应 地 更 新 进度 条 的 宽度 和 文本 @。 最 后 创 
建 一 个 循环 ,连续 6 次 调用 setTimeout 合 ,而 这 将 推迟 循环 次 数 乘 以 0.5 秒 的 时 间 调 用 updaterFn。 
0 吉 果 如 图 4-14 所 示 。 稍 加 努力 ,就 可 以 让 用 户 在 继续 下 一 步 操作 前 动态 获取 
当前 的 运行 状态 。 








Please wait Please wait 
We're doing something... We're doing something... 
| Gmpleted 








图 4-14 ”自动 更 新 等 待 消息 框 ( 左 ) ， 和 在 自动 关闭 
前 最 后 更 新 的 同一 等 待 消息 框 ( 右 ) 


本 节 ， 你 学 习 了 如 何 创建 弹性 而 又 极其 刚性 的 窗口 来 获得 用 户 的 关注 ， 还 探索 了 使 用 Ext JS 
的 超 单 例 类 Ext JS MessageBox 的 儿 种 方法 。 先 让 我 们 把 注意 力 放 到 TabPanel 类 上 , 它 会 为 我 们 
提供 一 个 办 法 让 UI 可 以 包含 许多 屏幕 的 内 容 , 但 每 次 只 显示 其 中 之 一 。 


4.4 组 件 也 可 以 存活 在 标签 面板 中 


TabPanel 类 建立 在 Panel 类 上 ， 以 创建 一 个 健壮 的 标签 界面 ， 它 让 用 户 可 以 选择 与 某 一 标 
签 相 关联 的 任何 屏幕 或 者 UI 控件 。 
标签 面板 内 的 标签 可 以 是 不 可 关闭 的 、 可 关闭 的 、 禁 用 的 ， 甚 至 是 隐藏 的 ， 如 图 4-15 所 示 。 








































































































可 关闭 的 标签 ee 
E 禁用 的 标签 
Tab Panels ih a window ~ x 可 滚 屏 的 标签 
Closable Tab Unclosable tab .0 


标签 位 置 “ 顶 置 ”一 


Click my tab's x button to close mel 


Click my tab’'s x button to cose mel 


标签 位 置 一旦 Closable Tab Unclosable tab 
“ 底 置 


不 可 关闭 的 标签 
图 4-15 ”探索 顶 置 和 底 置 标签 
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和 其 他 标签 界面 不 同 ，Ext JS 标签 面板 只 支持 项 置 和 底 置 标签 条 配置 。 这 主要 是 因为 很 多 浏 
览 需 仍 然 不 支持 CSS， 所 以 垂直 文本 无 法 实现 。 标 签 面板 使 用 Card 布 局 ， 它 可 以 快速 泻 染 复杂 的 
UI, 因为 它 使 用 了 一 种 称 为 懒惰 或 延 时 泻 染 的 常用 方法 来 浑 染 其 子 组 件 。 标签 面 板 的 延 时 演 染 功 
能 由 deferredRengder 参 数控 制 ， 其 默认 值 是 true。 

延 时 泻 染 意味 着 只 有 只 有 演 染 过 的 标签 才 会 被 激活 。 对 标签 面板 来 说 ， 拥 有 多 个 有 复杂 UI 
控件 的 子 元 素 是 很 平常 的 ， 比 如 图 4-16 里 的 标签 面板 ， 泻 染 它 需要 大 量 的 CPU 时 间 。 延 迟 对 于 每 
个 子 元 素 的 泻 染 直到 其 被 激活 ,可 以 加 速 标签 面板 的 初步 泻 染 , 使 用 户 拥有 一 个 具有 更 高 响应 性 
的 部 件 。 
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Save Cancel 














图 4-16 一 个 带 有 多 个 布局 复杂 的 子 元 素 的 标签 面板 
现在 你 要 构建 第 一 个 标签 面板 了 。 


4.4.1 构建 第 一 个 标签 面板 


TabPane1 是 Panel 的 一 个 直接 子 类 , 灵活 运用 了 cardLayout。 标签 面板 的 主要 功能 是 管理 
标签 条 中 的 标签 。 标 签 面 板子 组 件 的 管理 是 由 container 类 承担 的 ， 而 布局 管理 是 由 
cardLayout 承 担 的 。 下 面 的 代码 清单 展现 了 如 何 构 建 你 的 第 一 个 标签 面板 。 


代码 清单 4-8 ”探索 一 个 标签 面板 















































var simpleTab = { 
title : 'Simple tab'， 大 本 科 
html : 'This is a simple tab.' 引入 静态 标签 
人 
var closableTab = { 创建 可 关 


title : 'I am closable', 闭 标 签 
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html : 'Please close when done reading.', 
closable : true 

Da 

var disabledTab = { 六 
title : 'Disabled tab', :天 了 | 村 人 
itemId : 'disabledTab', 1 
html : 'Peekaboo!', Te 


disabled : true, 
closable : true 





Var tabpanel = Ext.create('Ext.tab.Panel', { 
activeTab : 0， “ 实例 化 标签 
itemId : 'myTPanel', 面板 
items 3 
simpleTab, 
closableTab, 
disabledTab 
] 
} 
Ext .create('Ext.window.Window', { 
0 Osa 
avo ret ft 
items : tabPanel 
}) .show(); 























虽然 在 这 上段 代码 中 本 可 以 用 单个 大 型 对 象 来 定义 所 有 元 素 , 但 我 们 觉得 最 好 还 是 把 它 拆 分 开 
来 ， 以 求 清晰 。 前 三 个 变量 用 通用 对 象 的 形式 定义 了 标签 面板 的 子 元 素 ， 前 提 是 假定 TabPanel 
类 的 defaultType (XType ) 是 Panel。 第 一 个 子 元 素 是 一 个 简单 的 不 可 关闭 标签 @。 这 里 值得 
注意 的 是 所 有 标签 默认 都 是 不 可 关闭 的 。 这 就 是 为 什么 第 二 个 标签 @ 把 closable 设 为 了 true。 
接 下 来 ， 有 一 个 可 关闭 和 禁用 的 标签 。 每 个 这 些 子 面 板 配置 对 象 都 有 自己 的 itemIda， 这 样 就 可 
以 定位 它们 ， 并 执行 某 些 操作 ， 比 如 启用 、 隐 藏 和 禁用 。 

然后 继续 实例 化 标签 面板 人 全。 把 activeTab 参 数 设 置 为 0。 这 么 做 是 因为 希望 第 一 个 标签 
在 标签 面板 @ 演 染 后 就 激活 。 可 以 在 标签 面板 的 jtems 混 合集 合 中 指定 任何 索引 号 。 因 为 该 混 
合集 合 是 一 个 数组 ， 所 以 第 一 个 元 素 的 索引 总 是 9。 最后， 标签 面板 的 items 数 组 制定 了 三 个 
标签 。 

接 下 来 ， 为 标签 面板 创建 一 个 容器 ， 一 个 Ext .window 的 实例 @。 为 窗口 指定 一 个 Fit 布 局 ， 
并 把 标签 面板 的 引用 设置 为 它 的 唯一 元 素 。 代 码 泻 染 后 生成 的 标签 面板 如 图 4-17 所 示 。 

现在 你 已 经 演 染 了 第 一 个 标签 面板 ， 接 下 来 可 以 开始 体验 它 的 乐趣 了 。 你 可 能 已 经 关闭 了 
“I am closable” 标 签 ， 这 没 问题 。 如 果 还 没有 关闭 ， 那 大 可 以 尽情 地 探索 演 染 后 的 UI 控件 ， 并 
在 你 觉得 可 以 的 时 候 关 闭 这 个 唯一 的 可 关闭 标签 ， 这 样 就 剩 下 了 两 个 标签 :“My first tab” 和 
“Disabled tab” 。 
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My first tab 


This is my first tab! 


图 4-17 在 窗口 内 泻 染 的 第 一 个 标签 面板 








4.4.2 ”你 应 该 知道 的 标签 管理 方法 


因为 TapPanel 类 是 container 的 一 个 子 类 ， 所 以 所 有 通用 的 子 元 素 管理 方法 都 可 以 使 用 。 其 
中 包括 aaa、remove 和 insert。 不 过 你 还 需要 了 解 另 外 的 儿 个 方法 ， 以 充分 利用 TabPane1 类 。 

首先 是 setactiveTab， 它 可 以 激活 一 个 标签 ， 就 好 像 用 户 已 经 在 标签 条 上 选择 了 该 元 素 ， 
并 接受 该 标签 的 索引 或 者 组 件 ID: 















































Var tPanel = Ext.ComponentQuery.gquery ('#myTPanel') [0]; 
tPanel.add(t{ 


title : 'New tab'， 
itemId : 'myNewTab', 
html : 'I am a new Tab' 


a 

执行 这 段 代码 将 会 生成 一 个 标题 为 “New tab” 的 新 标签 ， 它 会 自动 激活 。 在 aqd 操 作 后 调用 
setActiveTab 类 似 于 在 一 个 通用 容器 上 调用 aoLayout 。 还 可 以 在 代码 运行 的 同时 启用 和 禁用 
标签 ， 但 这 需要 另 尽 蹊 径 ， 而 不 只 是 简单 调用 标签 的 方法 。 

标签 面板 没有 enable 和 disable 方 法 ， 所 以 要 启用 或 者 禁用 一 个 子 元 素 ， 必 须 调用 子 元 素 
本 身 的 相应 方法 。 可 以 使 用 代码 清单 4-8 来 启用 禁用 了 的 标签 。 可 以 使 用 不 久 前 创建 的 kPanel13 引 
用 ， 搜 索 禁 用 了 的 子 元 素 并 启用 ， 代 码 如 下 : 


Panel.dqow('#disabledqTab') .enable(); 
是 的 , 仅 此 而 已 。 相 应 的 标签 条 元 素 (标签 UI 控件 ) 反映 该 元 素 不 再 被 禁用 。 这 是 因为 标签 
面板 授权 其 子 元 素 的 ( 你 猜 得 没 错 ) enable 和 disable 事 件 管理 其 相关 的 标签 条 元 素 。 

除了 启用 和 禁用 标签 以 外 , 你 还 可 以 隐藏 它们 。 要 隐藏 标签 ， 就 必须 访问 标签 面板 子 元 素 的 
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tap 属 性 。 为 了 加 以 演示 ， 要 隐藏 禁用 了 的 标签 ， 然 后 再 显示 : 








tPanel.down('#disabledTab') .tab.hide(); 
要 使 之 重新 显示 ， 执 行 以 下 代码 : 
tPanel .down('#disabledTab') .tab.show!(); 


你 现在 就 知道 创建 和 管理 一 个 标签 面板 有 多 容易 了 。 








4.5 小结 


我 们 讨论 了 瑞士 军刀 式 的 UI 显示 部 件 面 板 的 很 多 内 容 , 这 已 经 足以 让 任何 一 名 开发 人 员 坚 头 一 
转向 了 。 在 探索 Pane1 类 的 时 候 ， 我 们 看 到 它 提供 了 众多 选项 来 显示 用 户 交 互 内 容 ， 其 中 包括 工 
具 栏 、 按 钮 、 标 题 栏 图 标 以 及 微型 工具 。 
你 把 window 类 用 作 一 个 通用 容器 ， 并 掌握 了 动态 添加 和 删除 子 元 素 的 技巧 ， 从 而 有 能 力 动 
态 地 大 幅度 改变 一 个 完整 的 UI， 或 者 单个 部 件 或 控件 。 
在 探索 window 类 和 它 的 近亲 MessageBox 的 时 候 , 你 了 解 了 如 何 替换 掉 通 用 的 警告 和 提示 对 
话 框 ， 以 获取 用 户 的 注意 、 显 示 信 息 或 者 请 求 用 户 输入 。 你 还 把 玩 了 一 下 动画 式 的 等 待 消息 杠 






































MessageBoxo 
最 后 , 你 探究 了 标签 面板 , 学习 了 如 何 动态 管理 标签 元 素 ， 了 解 了 该 UI 控 件 带 来 的 几 个 可 用 
性 缺陷 。 


在 接 下 来 的 一 章 中 ， 你 将 探究 很 多 Ext JS 布局 方案 ， 并 将 了 解 这 些 控件 的 通常 用 法 和 缺陷 。 








本 章 内 容 

口 使 用 布局 系统 

口 探究 Layout 类 继承 模型 
口 了 解 Card 布 局 





在 构建 应 用 的 时 候 ， 很 多 开发 人 员 都 纠结 于 如 何 组 织 UI， 以 及 该 使 用 哪些 工具 来 组 织 。 
章 , 你 将 获得 必需 的 经 验 , 可 以 用 一 种 训练 有 素 的 方式 做 这 些 决定 。 我 们 将 从 介绍 那些 ExtJS 4 
的 新 组 件 布局 开始 ,然后 再 去 探究 为 数 众多 的 容 右 布局 模型 ， 并 确定 那些 最 好 的 方法 以 及 常见 
问题 。 

容 融 布局 管理 方案 负责 组 织 排列 屏幕 上 的 部 件 。 其 中 包括 简单 的 布局 方案 ,比如 Fit 布 局 ， 调 
整容 器 单个 子 项 的 尺寸 以 适合 该 容器 的 内 容 体 ; 还 有 复杂 的 布局 ， 比 如 Border 布 局 ， 它 把 容 顺 的 
内 容 体 分 割 成 5 个 可 管理 的 分 片 或 者 区 域 。 

我 们 要 对 容器 布局 进行 不 音 篇 幅 的 探讨 , 并 给 出 一 些 较 长 的 示例 , 以 此 为 跳板 来 设计 使 用 自 
己 的 布局 。 但 在 我 们 继续 深入 描述 每 一 个 容器 布局 管理 方案 以 前 , 先 来 聊 聊 布局 管理 器 是 如 何 工 
作 的 ， 并 介绍 新 的 组 件 布局 。 


5.1 布局 管理 器 如 何 工作 


之 前 提 到 过 , 布局 管理 方法 负责 组 织 排列 屏幕 上 的 部 件 。 为 此 , 它们 要 跟踪 每 一 个 子 项 与 其 
他 子 项 的 相对 位 置 。 排 列 部 件 采 用 的 策略 取决 于 你 使 用 的 那个 布局 管理 器 。 布 局 管理 器 分 为 两 组 : 
组 件 布 局 和 容器 布局 。 


5.1.1 组 件 布局 


组 件 布局 是 Ext JS 4 的 新 功能 ， 被 用 于 布置 组 件 的 内 部 元 素 。 在 日 常 的 使 用 中 ， 你 应 该 很 熟 
悉 Dock 组 件 布局 。Dock 布 局 负责 管理 诸如 工具 栏 的 可 停靠 元 素 ， 让 你 可 以 有 选择 性 地 添加 多 个 
顶部 和 底部 工具 栏 ， 以 及 左 侧 和 右 侧 工具 栏 ( 如 果 想 复习 一 下 有 关 停靠 的 细节 ， 请 回顾 4.2 节 )。 
如 果 要 实现 自己 的 组 件 , 以 及 组 件 布局 管理 方案 , 那 我 们 建议 熟悉 一 下 组 件 布局 现 有 的 层级 
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关系 ， 并 选择 一 个 相关 的 类 进行 扩展 。 
如 果 你 一 直 在 使 用 Ext JS 3 和 更 早 的 版 本 ， 那 或 许 还 记得 Form 布 局 用 起 来 有 多 麻烦 多 复杂 。 在 
Ext JS 4 中 再 也 不 需要 Form 布 局 ， 因 为 引入 了 Field 组 件 布局 及 其 子 类 ， 以 及 代码 库 中 的 相关 功能 。 
记 住 所 有 标准 组 件 已 有 各 自 对 应 的 组 件 布局 , 所 以 要 完成 日 常 编程 , 并 不 需要 详细 了 解 每 一 
个 组 件 布 局 。 本 章 中 ， 我 们 把 注意 力 放 在 容 带 布局 上 。 


5.1.2 ”容器 布局 


借助 容器 布局 可 以 管理 一 个 容器 内 的 子 组 件 的 位 置 和 尺寸 。 当 在 一 个 容器 上 添加 或 者 删除 一 
个 组 件 时 ， 容 器 会 与 其 父 容 器 沟通 ， 根 据 布局 管理 器 方案 调整 其 姊妹 容器 或 组 件 的 尺寸 。 

所 有 容器 布局 管理 器 都 共享 Ext .layout .container.Container 现 有 的 通用 功能 ,我 们 将 
详细 探究 每 个 布局 管理 器 。 

在 容器 布局 中 我 们 要 首先 来 看 一 看 Auto 布 局 , 它 是 容器 的 默认 布局 。Auto 布 局 是 最 基本 的 布 
局 管理 器 ， 它 与 容器 布局 共享 通用 功能 。 







































































5.2 ”Auto 布局 


你 可 能 还 记得 Auto 布 局 是 任何 容器 示例 的 默认 布局 。 它 把 元 素 上 下 考 加 地 放置 在 屏幕 上 。 虽 
然 Auto 布 局 不 显 式 调整 子 项 尺寸 , 但 如 果 内 容 体 没有 被 限定 的 话 , 一 个 子 项 的 宽度 可 能 与 该 容器 
的 内 容 体 宽度 一 致 。 

实现 Auto 布 局 是 最 容易 的 ,只 需要 添加 和 删除 子 项 。 为 此 需要 用 好 几 个 组 件 来 设置 一 个 动态 
示例 ， 如 以 下 代码 清单 所 示 。 完 成 后 ， 布 局 将 如 图 5-1 所 示 。 


代码 清单 5-1 实现 Auto 布 局 












































Var childPnl1 = { 
frame : true, 二 配置 第 一 个 
height : 50, 子 面板 
html : 'My First Chilgd Panel', 
title : 'First childqren are fun' 
}; 配置 第 二 个 
Var childPnl2 = { 面板 
width : 150, 
html : 'Second child', 
title : 'Second children have all the fun!' 
js > 创建 窗口 
var myWin = Ext.create("Ext.Window", { 
height ;800; 
Wh . ?0 | | Co ee 
Ee : 'A window with a container layout', Pe 设置 可 滚屏 
autoScroll : true, 
items -中 
childPn11, Ca 添加 子 面 板 


childPn12 








ta ss 
{ 二 配置 工具 栏 











Text “Ad Thildn; 
handler : function() { 
Var numItems = myWin.items.getCount() + 1; 
myWin.addl(t 
Git : 'Child number ' + numItems, 
height 7 
frame 人 
collapsible : true, 
collapsed : true, 
html : 'Yay, another child!' 
} 
} 
} 
] 
Pe 
myWin.show(); 
A window with a container layout xX 
Add child En 
自动 调整 宽度 的 子 项 
First children are fun 
计 庆 水 于 骨 My First Child Panel 国 定 宽度 的 子 项 
es Second children have all | 
the fun! | 
ond child 加 人 一、 
Child number 3 = 动态 滚动 条 
| 
Yay, another child! | 
动态 添加 的 子 项 | 
动态 添加 的 子 项 Child number 4 = 
Child number 5 hg 
二 
Child number 6 下 vv 








图 5-1 首次 实现 Auto 布 局 的 结果 


在 代码 清单 5-1 中 ， 首 先 要 做 的 是 用 Xtype 给 两 个 子 项 实例 化 对 象 引 用 ， 并 由 一 个 窗口 来 加 以 
管理 。chilgPn11@Q@ 和 chilgdPn12@。 这 两 个 子 项 是 静态 的 。 接 下 来 ,初始 化 mywin@3 引 用 , 它 
是 一 个 Ext .Window 示 例 。 还 要 把 autoScroll 属 性 @ 设 为 true。 这 指示 容器 把 CSS 属 性 
overflow-x 和 overflow-y 设 为 auto， 让 浏览 器 只 有 在 必要 的 时 候 才 显示 滚动 条 。 

请 注意 把 子 项 items 属 性 @ 设 为 了 一 个 数组 。 任 何 容器 的 items 属 性 都 可 以 是 一 个 用 来 列举 
多 个 子 项 的 数组 示例 , 或 者 是 一 个 单独 子 项 的 对 象 引 用 。 窗口 包含 一 个 工具 栏 @@， 上 面 有 单个 按 
钮 ， 点 击 时 会 往 窗 口 添加 一 个 动态 元 素 。 请 注意 在 Ext JS 4 之 前 ， 可 以 在 删除 或 者 添加 一 个 元 素 
之 后 调用 父 容器 的 doLayout ， 现 在 不 需要 这 样 做 了 ， 因 为 在 组 件 /容器 的 层级 关系 中 是 双向 沟通 
的 。 在 早期 版 本 中 , 添加 一 个 或 者 多 个 子 项 后 你 会 调用 mywin .doLayout。 如 果 要 对 组 件 进行 批 
量 更 新 ， 那 可 以 在 容器 上 把 suspenqLayout 设 为 Etrue 以 避免 调用 aoLayout 。 泻 染 后 的 窗口 应 
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该 如 图 5-1 所 示 。 

虽然 Auto 布 局 没有 提供 多 少 管理 子 项 尺寸 的 方法 , 但 它 并 非 完 全 无 用 。 相 比 于 它 的 子 类 它 很 
简洁 ， 所 以 如 果 想 展现 有 固定 尺寸 的 子 项 ， 用 它 最 合适 。 不 过 有 些 时 候 , 你 希望 动态 调整 子 项 的 
尺寸 来 适应 容器 的 内 容 主体 。 这 时 候 Anchor 布 局 就 有 用 了 。 











5.3 Anchor 布局 


Anchor 布 局 跟 其 他 容器 布局 很 相似 ， 因 为 它 把 子 项 上 下 用 在 一 起 ， 但 它 会 通过 在 每 个 子 项 上 指 
定 的 anchor 参 数 来 进行 动态 尺寸 调整 。 这 个 anchor 参 数 用 于 计算 子 项 相对 于 父 容器 内 容 体 的 尺寸 ， 
要 么 指定 为 一 对 百分比 , 要 么 被 指定 为 一 对 整数 偏 移 值 。 anchor 参 数 是 一 个 使 用 以 下 格式 的 字符 串 : 

anchor :"width，height" // 或 者 "width height" 


图 5-2 展 现 了 构建 结 











Panell 
25% 高 度 Panel2 


100% 宽度 es 


50% 高 度 


50% 宽度 Panel3 
25% 高 度 ~、h 


图 5-2 在 代码 清单 5-2 中 首次 实现 Anchor 布 局 的 泻 染 结果 
在 下 面 的 代码 清单 中 ,将 首次 尝试 用 百分比 来 实现 一 个 Anchor 布 局 。 
代码 清单 5-2 用 百分比 设置 的 Anchor 布 局 


var myWin = Ext.create("Ext.Window", ({ 
height E30 创建 窗口 


width ; -300, 


layout 和 “ 
border : false, 设置 布局 

















anchorSize : '400'， 
items ca 
{ 
ikle Banell"y 2 
anehor "100%,, 25%" 
frame : true 
{ 
title :'Panel2', =n 配置 尺寸 
anehor "0 S50%... 
frame : true 
{ 
titleé: “Panel3", 于 
anehnor eo0s,. 2Z08, 
frame : true 


] 
})); 


myWin.show(); 


在 代码 清单 5-2 中 ,实例 化 一 个 Ext .wIndow 的 示例 mywin@, 并 将 布局 指定 为 'anchor'@。 
第 一 个 子 项 Panel1， 其 anchor 参 数 人 被 指定 为 父 容器 宽度 的 100% ， 和 父 容器 高 度 的 25%。 
Pane12 其 anchor 人 参数 @@ 略 有 不 同 ，widqth 人 参数 是 0， 也 就 是 100% 简 单 表达 方式 。Panel12 的 
height 设 为 父 容器 高 度 的 530%。Pane13 的 anchor 参 数 四 被 设 为 530% 的 相对 wiath 和 25% 的 相对 
height。 泻 染 后 的 效果 应 该 如 图 5$-2 所 示 。 

用 百分比 设 定 相 对 尺寸 是 不 错 ， 但 也 可 以 指定 偏 移 值 ， 这 使 得 Anchor 布 局 有 更 大 的 灵活 性 。 
偏 移 值 是 根据 内 容 体 尺寸 加 上 偏 移 值 来 计算 的 。 通 常 来 说 ,这 里 指定 的 偏 移 量 是 负数 ， 以 确保 子 
项 在 视野 范围 内 。 让 我 们 来 回顾 一 下 代数 知识 , 加 一 个 负 整 数 就 相当 于 减 去 一 个 绝对 整数 。 如 果 
指定 一 个 正 偏 移 值 会 导致 子 项 的 尺寸 比 内 容 体 更 大 ， 那 就 需要 一 个 滚动 条 。 

我 们 将 使 用 之 前 的 示例 来 探究 偏 移 量 ， 只 对 代码 清单 5-2 中 的 子 项 XType 进 行 改动 : 


















































items :[ 

{ 
title : 'Panell', 
anchior "=50r -LT90"; 
frame : true 

} 

{ 
title : 'Panel2', 
danchot "NL0s -TSO 
frame : true 


] 


经 历 上 述 布 局 改动 后 泻 染 好 的 面板 应 该 如 图 5-3 所 示 。 我 们 把 子 项 的 数量 减少 到 了 两 个 ， 以 
便 更 容易 展现 偏 移 值 如 何 使 用 ， 以 及 它们 为 何 可 能 会 给 你 惹 不 少 麻烦 。 
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Panel1 


一 一 
| 








巾 
RS 
wn 
一 50 宽度 Ea 
一 150 高 度 
上 厂 一 一 一 一 一 一 _ 238 像素 一 一 一 一 一 一 一 -HF 50 像 素 | 
Panel2 | | 巡 
名 
qq 
从 本 
SN 
全 ”加 
-10 宽度 总 
一 150 高 度 
1 5 | 
10 像 素 











288 像 素 | 
图 5-3 ”用 偏 移 值 通过 尺寸 计算 来 设置 一 个 Anchor 布 局 
解析 这 里 的 情况 很 重要 ， 而 这 需要 做 一 点 数学 计算 。 用 Firebug 来 检视 DOM ， 你 会 发 现 该 窗 
口 的 内 容 体高 285 像 素 、 宽 288 像 素 。 通 过 简单 的 计算 ， 可 以 判断 出 Pane11 和 Pane12 的 尺寸 应 该 


是 多 少 : 















































Panell1 Wiath = 288px - 50px = 238px 
Panell1 Height = 285px - 150px = 135px 
Panel2 Width = 288px - 1l0px = 278px 
Panel2 Height = 285px - 150px = 135px 


可 以 看 出 显然 两 个 子 面板 在 窗口 内 完美 契合 。 如 果 加 上 两 个 面板 的 高 度 ， 也 可 以 看 出 它 
们 契合 ， 高 度 相 加 只 有 270 像 素 。 但 是 如 果 在 垂直 方向 上 调整 尺寸 呢 ? 注意 到 什么 怪事 吗 ? 把 
窗口 的 高 度 增加 超过 15 像 素 ， 就 会 导致 Pane12 被 推 到 屏幕 以 外 ， 同 时 在 winaowBoqy 中 显示 
滚动 条 。 

请 记 住 使 用 这 种 布局 , 子 项 的 尺寸 是 父 容器 内 容 体 尺 寸 的 相对 值 加 上 一 个 常数 , 也 就 是 偏 移 
量 。 为 了 解决 这 个 问题 ， 可 以 混合 使 用 固定 尺寸 和 偏 移 值 。 为 了 探究 这 个 概念 ， 更 改 Pane12 的 
anchor 参 数 ， 并 加 上 一 个 固定 高 度 : 


{ 
































title : 'Panel2', 
height : 150, 
aneher 3 10"; 


frame : true 
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这 个 改动 使 得 Pane12 的 高 度 固定 在 150 像 素 。 新 演 染 的 窗口 现在 可 以 调整 到 几乎 任何 尺寸 ， 
Pane11 会 增长 到 窗口 内 容 体 高 度 减 去 150 像 素 ， 这 样 留 出 的 垂直 空间 ， 刚 好 可 以 让 Pane12 停 留 
在 屏幕 内 。 这 样 做 的 一 个 好 处 是 Pane12 的 宽度 还 是 相对 的 。 

Anchor 布 局 被 用 于 多 种 不 同 的 布局 任务 。Anchor 布 局 默认 是 由 Ext .form.Panel 类 使 用 , 但 
它 也 可 以 用 于 任何 容器 或 者 任何 可 以 容纳 其 他 子 项 的 子 类 ， 比 如 Panel 或 者 Window。 

有 些 时 候 需 要 完全 掌控 部 件 布局 的 定位 。Absolute 布 局 可 完美 满足 这 种 需求 。 






























































5.4 Absolute 布局 
Absoute 布 局 仅 次 于 Auto 布 局 ， 是 目前 为 止 最 简单 易 用 的 布局 之 一 。 它 固定 一 个 子 项 的 位 置 ， 


具体 是 通过 把 子 项 的 CSS 'position' 属 性 设置 为 'absolute' ,并 把 cop 和 1left 属 性 设置 为 你 在 
子 项 上 设置 的 x 和 y 参 数 。 很 多 设计 者 用 CSS 把 HTML 元 素 置 为 一 个 bosition:absolute, 但 Ext 
JS 利 用 JavaScript 的 DOM 操 作 机 制 把 属性 设置 为 元 素 自身 ， 而 不 用 非得 去 动 CSS。 图 5-4 展 现 要 构 


建 的 布局 。 下 面 的 代码 清单 展现 了 如 何 用 Absolute 布 局 来 创建 一 个 窗口 。 
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图 5-4 ”代码 清单 5-3 中 实现 的 Absolute 布 局 





代码 清单 5-3 Absolute 布局 实用 示例 


var myWin = Ext.create("Ext.Window", { 


height 3 人 95 

width : 300, 了 设置 布局 
layout : 'absolute', 

autoScrol1 : true, 

border : false, 

items col 


{ 


title : 'Panell', 、 和 
> ,6 9 设置 子 项 坐标 
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y > 
height : 100, 
width : 100, 


html 和 
frame : true 
Fs 
{ 
title : 'Panel2', fn 设置 子 项 坐标 
次 0 
y 120 


height : 75, 

width : 100, 

html Ce 
frame : true 


] 
$3 


myWin.show(); 


现在 ,这 段 代码 中 的 大 部 分 你 应 该 都 觉得 熟悉 了 , 但 也 有 一 些 新 的 参数 。 第 一 个 值得 注意 的 
改变 是 窗口 的 layout@ 参 数 被 设置 为 'absolute'。 往 窗口 添加 两 个 子 项 。 因 为 用 的 是 Absolute 
布 届 ， 所 以 需要 指定 X 坐 标 和 Y 坐 标 。 

第 一 个 子 项 Pane11 的 X@ (CSS 的 left 属 性 ) 坐标 设置 为 50 像 素 , 而 Y( CSS 的 top 属 性 ) 坐 
标 设置 为 50 像 素 。 第 二 个 子 项 Pane12 的 Xx 全 和 7 坐标 分 别 设置 为 90 像 素 和 120 像 素 。 演 染 后 的 代码 
应 该 如 图 5-4 所 示 。 

这 个 示例 里 一 个 很 明显 的 细节 是 Pane12 交 著 在 Panel11 上 。Pane12 之 所 以 在 上 而 ,是 因为 
它 在 DOM 树 里 的 位 置 。Panel12 的 元 素 在 Panel11 的 元 素 上 方 ， 而 且 因 为 Pane12 的 CSS 位 置 属性 
也 被 设 为 'absolute', 它 将 会 显示 在 Panel11 上 方 。 当 你 在 实现 这 个 布局 的 时 候 一 定 要 时 刻 记 住 
发 生 交 码 的 风险 。 另 外 ， 因 为 子 项 的 位 置 是 固定 的 ，Absolute 布 局 对 能 调整 尺寸 的 父 容 需 而 言 并 
非 理 想 的 解决 方案 。 

如 果 有 一 个 子 项 ， 想 让 它 随 着 父 容器 一 起 调整 太 寸 , 那 Fit 布 局 就 是 最 佳 选择 。 


5.5 Fit 布 局 


Fit 布 局 迫使 一 个 容器 的 单个 子 项 填充 它 的 内 容 体 元 素 ， 也 是 一 种 特别 简单 的 布局 。 图 5-5 展 
现 了 使 用 这 种 布局 的 最 终结 果 ， 具 体 使 用 方法 见 以 下 代码 清单 。 


代码 清单 5-4 ”Fit 布 局 


var myWin = Ext.create("Ext.Window", { 

































































如 




















height 200.; 

width : 200， 了 
layout 全 让 二 

border : false, 

items 经 于 


{ 


title : 'Panell', 
添加 子 项 








html i fit, TH my Parentr.., 
frame : true 
} 
] 
}); 


myWin.show(); 


Panelt 


i fit in my parent! 




















图 5-5 ”使 用 Fit 布 局 (代码 清单 5-4 ) 


在 代码 清单 5-4 中 把 窗口 的 layout 属 性 设置 为 'fit'@， 并 实例 化 了 单个 子 项 ， 一 个 
Ext .Panel 的 示例 @。 该 子 项 的 XType 根 据 窗口 的 defaultType 属 性 预 设 , 后 者 由 窗口 的 原型 自 
动 设置 为 'panel'。 泻 染 后 的 面板 应 该 如 图 5-5 所 示 。 

Fit 布 局 让 有 一 个 子 项 的 容器 获得 无 缝 外观 的 好 方法 。 不 过 一 个 容器 里 经 常会 有 多 个 部 件 。 所 
有 其 他 布局 管理 方案 通常 都 是 用 来 管理 多 个 子 项 的 。Accordion 布 局 是 其 中 最 美观 的 布局 之 一 ， 
用 它 可 以 垂直 地 堆 受 可 折 释 的 元 素 ， 每 次 只 给 用 户 显示 一 个 元 素 。 






































5.6 ”Accordion 布局 


在 以 下 代码 清单 中 使 用 的 Accordion 布 局 ， 是 VBox 布 局 的 一 个 直属 子 类 。 当 想 显 示 垂 直 堆 
徐 的 多 个 面板 , 但 只 有 一 个 面板 可 以 被 展开 或 收缩 时 ， 这 种 布局 很 有 用 。 图 5-6 展 现 了 最 后 的 


结 

















代码 清单 5-5 Accordion 布 局 


var myWin = Ext.create("Ext.Window", { 


height 2 .0:0; 

width 300., 

border : false, ya 
title : 'A Window with an Accordion layout', 

layout : 'accordion', 


layoutConfig : { 


animate : true we 
yy 配置 布局 


items sl 


{ 
6 添加 首 个 子 项 
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xtype 3 EOPN, 

title : 'General info', 
bodyStyle : "padding: Spx', 
defaultType : 'field', 
fieldDefaults : { 


labelWidth : 50 
}, 
labelWidth : 50, 





items 324 
{ 
fieldLabel : 'Name'， 
anchor 2 EO 
{ 
xtype : 'field', 
fieldLabel : 'Age', 
size 3 
Fa 
xtype GDGA 
fieldLabel : 'Location', 
anchor es 
store : [ 'Here', 'There', 'Anywhere' 
小 
] 
xtype : 'panel', i 
title "BLO", 文本 框 
Tayout ss 于 下 下风 
items : { 
xtype : 'textarea', 
Value : 'Tell us about yourself' 
} 

{ sw 
title : 'Instructions', 天 汪汪 
html : "Please enter information.', 添加 带 工 具 
tooLs © 的 面板 


{id : 'gear'}, {id:'help'} 
] 


] 
了 
myWin.show(); 


代码 清单 -5 展现 了 Accordion 布 局 有 多 好 用 。 要 做 的 第 一 件 事 是 实例 化 一 个 窗口 mywin, 后 
者 的 1ayout 属 性 被 设 为 'accordion'@。 有 一 个 配置 选项 你 至 今 还 没有 见 到 过 ， 那 就 是 
layoutConfig@。 有 些 布 局 方案 有 特定 的 配置 选项 ， 可 以 把 它们 定义 为 组 件 构 造 函 数 的 配置 
选项 。 
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A Window with an Accordion layout x 


General info 一 se 
Name: 折 又 /展开 


Age: 


Location: ES 








Bio + 下 茂 


Instructions +|[ 久 |[3 a 
图 5-6 ”Accordion 布 局 是 把 多 个 元 素 作为 单个 可 视 化 组 件 展现 给 用 户 的 绝 佳 方法 


这 些 l1ayoutConfig 参 数 可 以 改变 一 个 布局 的 行为 或 者 功能 。 在 这 里 , 为 Accordion 布 局 设置 
好 layoutconfig, 指定 animate:true, 也 就 是 指示 Accordion 布 局 以 动画 方式 呈现 子 项 的 折 赫 
和 展开 。 男 一 个 改变 布局 行为 的 配置 选项 是 activeonTop， 如 果 它 被 设 为 Lrue， 就 会 把 当前 激 
活 的 空间 移动 到 栈 的 顶部 。 当 第 一 次 运用 一 个 布局 的 时 候 ， 我 们 建议 你 查询 它 API 中 所 有 可 用 的 
选项 。 

接 下 来 开始 定义 子 项 , 这 一 步 建 立 在 你 之 前 学 到 的 一 些 知 识 之 上 。 第 一 个 子 项 是 FormPanel 
合 ， 它 用 到 本 章 前 面 的 anchor 参 数 。 接 下 来 指定 一 个 面板 人 @， 该 面板 的 layout 属 性 设 为 ' fit' 
并 且 包 含 一 个 子 rextArea。 然 后 把 最 后 一 个 子 项 四 定义 为 一 个 带 部 分 工具 的 普通 面板 。 泻 染 后 
的 代码 应 该 如 图 5-6 所 示 。 






















































































配置 布局 的 另 一 种 方法 
我 们 可 以 不 同时 使 用 layout (String) 和 1layoutconfig (Object) 配 置 ， 而 是 把 
layout 配 置 设置 为 一 个 既 包 含 布 局 类 型 又 包含 该 布局 任何 选项 的 Object。 举 例 来 说 : 


cD 
type Velonael on 
animate : true 


} 





很 重要 的 一 点 是 要 注意 Accordion 布 局 只 能 配合 Ext .panle.Panel 和 它 的 两 个 子 类 ， 

Ext .grid.Panel 和 Ext .tree.Panel 才 能 正常 发 挥 作用 ,这 是 因为 Panel( 和 两 个 特定 的 子 类 ) 
有 Accordion 布 局 正常 工作 所 需 的 东西 。 如 果 在 Accordion 布 局 内 还 需要 什么 别 的 元 素 ， 比 如 标签 
面板 ， 那 就 用 一 个 面板 封装 该 元 素 ， 并 把 那个 面板 作为 Accordion 布 局 容器 的 一 个 子 项 添加 。 
虽然 Accordion 布 局 是 在 屏幕 上 同时 显示 多 个 面板 的 好 办 法 ， 但 它 有 局 限 性 。 比 如 说 ， 如 果 
你 需要 在 一 个 容器 里 放置 10 个 组 件 怎么 办 ?每 个 元 素 标题 栏 高 度 的 总 和 会 占据 很 多 宝贵 的 屏幕 
空间 。Card 布 局 可 以 完美 满足 此 类 需求 ， 因 为 它 让 你 可 以 显示 或 隐藏 多 个 子 组 件 , 或 者 在 它们 之 
间 切 换 。 
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5.7 Card 布局 





Card 布 局 确保 容 需 的 子 项 与 容 噩 的 矿 二 相 一 致 。 和 Fit 布 局 不 同 , Card 布 局 可 以 控制 多 个 子 项 。 
这 个 工具 让 你 有 充分 的 灵活 性 来 创建 类 似 向 导 界 面 的 组 件 。 

除了 一 开始 激活 的 项 以 外 ，Card 布 局 通过 其 公开 的 setActiveItem 方 法 让 最 终 开 发 人 员 实 
现 翻 页 功能 。 为 了 创建 类 似 向 导 界 面 的 界面 ， 需 要 创建 一 个 方法 来 控制 翻 页 : 


var handleNav = function(btn) { 


























Var activeItem = myWin.layout.activeItem, 
index = myWin.items.indexOf (activeItem), 
numItems = myWin.items.getCount () ， 


indicatorEl = Ext.getCmp('indicator').el; 





if (btn.text == 'Forward' && index < numItems - 1) { 
index++; 
myWin.layout.setActiveItem(index); 
index++; 


indicatorEl.update(index + ' of ' + numItems); 
让 
else if (btn.text == 'Back' && index > 0) { 
myWin.layout.setActiveItem(index - 1); 
indicatorEl.update(index + ' of ' + numIitems); 


} 

在 这 里 通过 确定 激活 该 项 的 索引 号 , 并 根据 是 点 击 “ 前 进 ” 还 是 “后 退 ”按钮 设置 激活 元 素 ， 
来 控制 卡片 快 翻 。 然 后 更 新 底部 工具 栏 的 提示 文本 。 接 下 来 ， 我们 来 实现 Card 布 局 。 以 下 代码 清 
单 很 长 也 很 复杂 ， 所 以 请 耐心 看 完 。 


代码 清单 5-6 ”Card 布 局 实用 示例 





var myWin = Ext.create("Ext.Window", { 
height : 200, 
width » “300 ey 
border : false, 设置 Card 布 局 
title : 'A Window with a Card layout', 
lJayout i "Gard yg 
activeItem 0 
defaults : { border : false }, 
ee ul 配置 激活 元 素 
xtype i Mo se 1 i 
title : 'General info', 
bodyStyle "Baddinio:. SDC, 
defaultType : 'field', 
labelWigdth : 50， 
items iL 
{ 
fieldLabel : 'Name'， 


anchor ee 


}, 





2 


xtype ‘numberfield', 
fieldLabel 'Age', 
size 2 3 


'combo', 
'Location', 
Oe 

'Here', 


xtype 
fieldLabel 
anchor 


store Rl 'There', 


'panel', 
title 'Bio', 
layout a 
items : { 
xtype 
value 


xtype 


'textarea', 
'Tell us about yourself' 


'Congratulations', 
'Thank you for filling out our 


title 
html 
} 


dockedItems : |[ 


{ 
xtype oolbar; 


dock "bottom'， 
items : [ 


'Back', 
handleNayv 


'Forward', 
handleNav 


text 
handler 


type 'component', 
id indicator,y 
style 'margin-right: 
html "1 SE. 3 


myWin.show(); 


'Anywhere' | 


fOEL 


了 添加 导航 按钮 


的 了 6 添加 指示 


器 组 件 
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代码 清单 5-6 详 细 记录 了 如 何 用 Card 布 局 创建 一 个 窗口 。 虽 然 大 多 数 代 码 你 应 该 都 熟悉 了 ， 
但 我 们 还 是 要 指出 其 中 的 几 点 。 第 一 显然 要 注意 的 地 方 是 layout 属 性 @,， 它 被 设 为 'card'。 接 
下 来 是 activeItem 属 性 @， 容 器 在 泻 染 时 间 把 它 传 给 布局 。 你 把 它 设 为 0， 指 示 布 局 在 容器 泻 
染 的 时 候 调 用 子 组 件 的 render 方 法 。 

接 下 来 定义 底部 工具 栏 ， 其 中 包含 了 Forward ( 前进 ) 和 Back (后 退 ) @ 按 钮 ,它们 调用 之 
前 定义 的 nandleNav 方 法 和 一 个 用 来 显示 当前 激活 元 素 索 引号 的 通用 组 件 @, 演 染 后 的 容器 应 该 
如 图 $-7 中 的 容器 所 示 。 




















A Window with a Card layout X 
Generalinfo 
Name: 

Age: 


Location: v 


<> 


Back Forward 1of3 


























图 5-7 用 一 个 全 交互 式 导 航 工 具 栏 实现 的 首 个 Card 布 局 ( 代码 清单 5-6 











点 击 Forward 或 Back 按 钮 会 调用 handleNav 方 法 ， 该 方法 会 处 理 翻 页 并 更 新 指示 器 组 件 。 请 
记 住 使 用 Card 布 局 时 ， 激 活 元 素 切 换 的 逻辑 是 完全 由 终端 开发 人 员 来 创建 和 管理 的 。 

除了 之 前 讨论 的 这 些 布局 ，ExtJS 还 提供 了 另外 几 种 布局 方案 。Column 布 局 是 UI 开 发 人 员 最 
喜欢 的 布局 方案 之 一 ， 用 于 组 织 UI 列 ， 列 宽 可 以 达到 其 父 容器 的 全 宽 。 

















5.8 Column 布局 


把 组 件 组 织 为 列 ， 可 以 在 一 个 容器 上 并 排 显 示 多 个 组 件 。 和 Anchor 布 局 一 样 ， Column 布 局 
可 以 设置 子 组 件 的 绝对 宽度 或 者 相对 宽度 。 在 使 用 这 种 布局 时 有 一 些 事 要 注意 。 我 们 稍 后 会 着 重 
讲解 它们 ,但 首先 构建 一 个 Column 布 局 窗口 ， 如 以 下 代码 清单 所 示 。 


代码 清单 5-7 探究 Column 布 局 
var myWin = Ext.create("Ext.Window", { 
height $7 2 00 








width : 400, a 设置 可 滚屏 

autoScroll : true, 

id : 'myWin', 

title : 'A Window with a Column layout', 

layout "Oo 

defaults 各 二 村 3 配置 布局 
frame : true 

和 

items 2 


{ 
title 2 BOOL ys 
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id elo) i We 
columnWidth : .3 
| ; 6 设置 相对 宽度 
tit ke EO 2 
html : "20% relative width", 
columnWidth : .2 
Ds 
itler re OO 
html "100px fixed width", 
width : 100 
}, 6 把 宽度 固定 为 
{ | 100 像 素 
Title i 
frame > ey 
html "50% relative width"， 
columnWidth : .5 


] 
et 


myWin.show(); 


0 配置 相对 宽度 





简 而 言 之 ，Column 布 局 很 易 用 。 声 明子 项 ， 并 指定 相对 宽度 或 绝对 宽度 或 两 者 的 结合 ， 如 


上 所 示 。 在 代码 清单 5-7 中 ， 把 
在 一 起 超过 容器 的 尺寸 时 ,滚动 条 
后 声明 4 个 子 组 件 ， 其 中 第 


饰 


ba 








容器 
能 够 显示 
和 一 个 子 组 件 通 过 columnWwiath 合 属性 把 它 的 相对 wiatn 设 为 30%。 把 


二 个 子 组 件 的 相对 wigth 设 为 20%。 








性 @ 设 为 Ltrue， 以 确保 当 子 组 件 的 尺寸 合 
出 来 。 接 下 来 把 1ayout 属 性 设置 为 'column'@。 人 然 


的 autoScroll 属 属 + 


疝 














然后 混合 使 用 固定 和 相对 宽度 ， 给 第 三 个 子 项 设置 固定 


width 为 100 像 素 @。 最 后 , 设置 最 后 一 个 子 项 的 相对 width@ 为 50%。 泻 染 后 的 示例 应 该 如 图 5-8 














所 示 。 
A Window with a Column layout x 
Coli Col2 Col3 Col4 
20% 100px fixed width | 50% relative width 
relative 
width 
图 5-8 首 个 Column 布 局 ， 采 用 相对 于 一 个 固定 列 宽 实 体 的 相对 列 宽 
































如 果 把 所 有 相对 宽度 相 加 ， 会 发 现 它 们 的 总 和 是 100%。 这 是 怎么 回 事 ? 三 个 组 件 ， 占 据 了 





100% 的 宽度 ， 可 另外 还 有 一 个 固定 宽度 组 件 ? 要 理 
局 是 如 何 设 置 所 有 子 组 件 的 尺寸 的 。 





解 其 中 的 原因 ， 你 要 深入 解析 一 下 Column 布 
下 来 动 动 数学 脑筋 。 














让 我 们 用 
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Column 布 局 的 精髓 是 它 的 onLayout 方 法 ,后 者 计算 容器 内 容 体 的 尺寸 ， 在 这 里 也 就 是 388 
像素 。 然 后 它 遍 历 所 有 直接 子 项 ， 确 定 分 配给 所 有 带 相对 宽度 的 子 项 的 空间 大 小 。 
为 此 ， 它 首先 要 用 容器 内 容 体 的 已 知 宽度 ， 剪 去 所 有 带 绝 对 宽度 的 子 组 件 的 宽度 。 在 这 
个 示例 中 ， 有 一 个 绝对 宽度 为 100 像 素 的 子 项 。Column 布 局 计算 出 388 和 100 的 差 ， 也 就 是 288 
( 像素 )。 
现在 Column 布 局 知道 还 剩 下 多 少 水 平 空间 ， 它 可 以 根据 百分比 来 设置 每 个 子 组 件 的 尺寸 。 
它 遍历 每 个 子 项 ,并 基于 已 知 可 用 的 容器 内 容 体 水 平 宽度 ,来 设 定 每 个 子 项 的 尺寸 。 具体 来 说 就 
是 拿 可 用 容器 内 容 体 水 平 宽度 乘 以 百分比 〈 用 小 数 表 示 )。 设 置 完成 后 ， 所 有 相对 宽度 的 子 组 件 
的 宽度 总 和 就 是 288 像 素 。 
现在 你 已 经 了 解 了 这 种 布局 的 宽度 计算 方法 , 让 我 们 把 注意 力 转移 到 子 项 的 高 度 上 去 。 请 注 
意 子 组 件 的 高 度 并 不 等 于 容器 内 容 体 的 高 度 ， 这 是 因为 Column 布 局 并 不 管理 子 组 件 的 高 度 。 这 
给 子 项 们 带 来 了 一 个 问题 , 它们 可 能 会 超出 它们 容器 主体 的 高 度 。 这 就 是 为 什么 要 把 这 个 窗口 的 
autoScroll 设 为 true。 你 可 以 往 'col1' 组 件 添加 一 个 超大 的 子 项 来 践 行 这 一 理论 。 在 Firebug 
的 JavaScript 和 输入 控制 台 里 输入 以 下 代码 。 确 保 浏览 器 里 正在 运行 代码 清单 5-7 的 原始 代码 。 
Ext .getCcmp ('col1') .addl({ 
height 2250 
title : 'New Panel', 
frame true 
}); 
现在 你 应 该 看 到 一 个 面板 底 在 面板 ,coll ,中 ， 其 高 度 超出 了 窗口 内 容 体 的 高 度 。 请 注意 滚 
动 条 是 如 何 出 现在 窗口 中 的 。 如 果 没 有 把 autoscrol1 设 为 true，UI 看 起 来 会 断 的 ， 其 可 用 性 可 
能 打折 扣 或 者 有 缺陷 。 可 以 垂直 和 水 平地 滚屏 。 之 所 以 可 以 垂直 滚屏 ， 原 因 在 于 col1 的 整体 高 
度 大 于 窗口 内 容 体 的 高 度 。 这 是 可 以 接受 的 。 这 里 的 问题 在 于 水 平 滚屏 。 你 可 能 还 记得 Column 
布局 计算 出 只 有 288 像 素 可 以 供 带 相对 宽度 的 三 列 分 配 空间 。 因 为 垂直 的 滚动 条 现在 可 见 了 ， 所 
以 可 以 用 来 显示 三 列 的 物理 空间 又 要 减 去 垂直 滚动 条 的 宽度 。 在 Ext JS 4 中 ， 在 往 任何 直接 子 项 
添加 组 件 的 时 候 ， 都 会 自动 调用 父 容 需 的 aoLayonut 方 法 〈 在 之 前 的 版 本 中 ， 必 须要 调用 父 容 需 
的 doLayout 方 法 以 保持 UI 美观 )。 
可 以 看 到 ，Column 布 局 非常 适合 把 子 组 件 分 列 进行 组 织 。 这 种 布局 有 两 个 限制 。 所 有 子 项 
都 是 始终 左 对 齐 的 , 而 它们 的 高 度 都 不 受 父 容器 文 配 。ExtJS 提 供 了 HBox 布 局 来 帮助 克服 Column 
布局 的 局 限 性 ， 并 大 大 扩展 它 的 功能 。 



























































































































































5.9 HBox 和 VBox 布局 


HBox 布 局 的 行为 跟 Column 布 局 类 似 ， 因 为 它 把 元 素 分 列 显示 ， 但 它 的 灵活 性 可 以 大 得 多 。 
比如 说 , 既 可 以 在 垂直 方向 又 可 以 在 水 平方 向 上 改变 子 项 的 排列 方式 。 这 个 布局 方案 另 一 大 特点 
在 于 在 需要 的 时 候 它 可 以 让 列 和 行 伸展 到 父 容器 的 对 应 尺寸 。 

让 我 们 来 深入 探讨 一 下 HBox 布 局 ， 如 以 下 代码 清单 所 示 ， 在 其 中 将 创建 一 个 有 三 个 子 面板 
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的 容器 。 但 首先 ， 让 我 们 看 看 图 5-9， 了 人 解 一 下 要 实现 的 效果 。 
代码 清单 5-8 HBox 布 局 : 探究 包装 配置 
Ext .create ("Ext .Window", { 
layout 'hBbox’s 
Re a Ostia ee 
width 5 300' 
title 'A Container with an HBox layout', 
layoutConfig : { 
Dacks "Etart” 
} ， Ca 
defaults : { 
frame : true, 
width : 75 
上 
items : [ 
{ 
title : 'Panel 1'， 
height : 100 
title : 'Panel 2', 
height : 75, 
width : 100 
名 
{ 
title : 'Panel 3', 
height : 200 
} 
] 
}) .show(); 


A Container with an HBox layout 


Panel 1 


Panel 2 Panel 3 


x AContainer with an HBox layout XxX 


Panel 1 Panel2 


A Container with an HBox layout Xx 


Panel 3 Panel 1 Panel 2 Panel 3 





pack Etart 


pack : 


Center pack : ‘end' 








图 5-9 ”HBox 布 局 选项 (代码 清 


单 5-8 ) 











在 代码 清单 5-8 中 , 你 把 layout 设 为 'hbox'@ 并 且 指 定 layoutconfig@ 配 置 对 象 。 把 三 个 
子 面 板 创建 为 不 规则 的 形状 , 让 你 可 以 充分 地 练习 不 同 的 布局 配置 参数 。 在 这 些 布局 配置 参数 中 
可 以 指定 两 个 ， 即 back 和 align， 其 中 pack 意 思 是 “垂直 对 齐 方式 ”而 align 意 思 是 “水 平 对 
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齐 方式 ”。 理 解 这 两 个 参数 的 含义 之 所 以 重要 ， 是 因为 对 HBox 布 局 的 近亲 VBox 布 局 来 说 ， 它 们 
正好 相反 。pack 人 参数 接受 三 个 可 能 的 赋值 : 'start'、'center' 和 'end'。 在 这 里 我 们 把 它们 
理解 成 左 、 中 和 右 。 修改 代码 清单 5-8 里 的 参数 会 导致 图 5-9 中 的 一 个 泻 染 后 窗口 。pack 属 性 的 默 
认 值 是 'Start "os 

align 参 数 接受 4 个 可 能 的 赋值 ，'top' 、'migddle'、'stretch' 和 'stretchmax'。 请 记 
住 在 HBox 布 局 中 ，align 属 性 指定 的 是 垂直 对 齐 方式 。 

align 属 性 的 默认 参数 是 'top'。 为 了 改变 子 面 板 的 垂直 对 齐 方式 , 必须 要 覆盖 它 的 默认 值 ， 
在 容器 的 layoutconfig 对 象 中 加 以 指定 。 图 5-10 展 现 了 如 何 根 据 几 个 不 同 的 属性 组 合 来 改变 子 
项 设置 尺寸 和 组 织 排列 的 方式 。 












































A Container with an HBox layout x | AContainer with an HBox layout x AContainer with an HBox layout x 

Panel i Panel 2 Panel 3 

Panel 3 Panel 3 
Panel 1 Panel 1 
Panel 2 Panel 2 
|| 
pack : 'start' pack : 'center' pack : 'end' 
align: 'middle' align: 'middle' LO otroten 








图 $-10 “stretch ' 排 列 选项 将 总 是 覆盖 子 项 指定 的 任何 高 度 值 


给 align 属 性 指定 一 个 值 ' stretch' ， 也 就 是 指示 HBox 布 局 把 子 项 的 高 度 调整 为 容器 内 容 
体 的 高 度 ， 这 样 可 以 克服 Column 布 局 的 局 限 。 

我 们 必须 要 探究 的 最 后 一 个 配置 参数 是 Elex， 它 跟 Column 布 局 的 columnwWiath 参 数 类 似 ， 
并 在 子 项 中 指定 。 和 columnwidth 人 参数 不 同 ，flex 人 参数 被 诠释 为 一 种 权重 ， 或 者 说 优先 级 ， 而 
不 是 列 的 百分比 。 比 如 说 ,希望 能 够 每 一 列 的 列 宽 都 相同 。 那 就 把 每 一 列 的 f1ex 设 为 相同 值 ， 
那 它们 的 宽度 就 一 臻 了 。 如 果 想 让 两 列 的 总 列 宽 拓 宽 到 父 元 素 容 器 宽度 的 /2， 第 三 列 拓宽 为 匀 
余 的 /2， 那 就 让 前 两 列 的 flex 值 都 等 于 第 三 列 f£1ex 值 的 1/2。 比 如 说 : 


















































defaults : { 
frame : true, 
Wrath 73 
Fs 
items 2 眉 
{ 
title : 'Panel 1'， 
LE 半生 
3 
了 
title. "Panel 2 


f 上 EK 汪 





七 主攻 下 全 7 LPANeL. 3 
> < 
} 
] 








用 VBox 布 局 也 可 以 垂直 堆 徐 元 素 , 采用 的 语法 跟 HBox 布 局 相同 。 要 使 用 VBox 布 局 , 修改 代 
码 清 单 5-8 中 的 代码 ， 把 layout 属 性 改 成 'vbox' ， 并 有 晶 刷 新 页 面 。 然后， 可 以 应 用 之 前 描述 的 









































flex 人 参数 ， 证 每 个 面板 的 高 度 都 是 与 父 容器 的 相对 高 度 。 我 们 喜欢 把 YBox 布 局 看 成 是 Auto 布 局 








的 加 强 版 。 





把 VBox 布 局 和 HBox 布 局 相对 照 , 有 一 个 参数 变化 。 回 想 一 下 HBox 布 局 的 align 人 参数 接受 赋 





值 'top'。 而 对 VBox 布 局 来 说 ， 指 定 的 是 值 是 ' left' 而 非 'top'。 


现在 你 已 经 掌握 了 HBox 和 VBox 布 局 ， 我 们 要 改换 到 Table 布 局 ， 你 可 以 在 上 面 安置 子 组 件 ， 


比如 一 个 传统 的 HTML 表 格 。 


5.10 Table 布局 


Table 布 局 可 以 全 面 控制 如 何 清晰 可 见地 组 织 排列 组 件 。 有 很 多 人 习惯 于 用 传统 方式 来 构建 

















HTML 表 格 ， 也 就 是 写 HTML 代 码 。 构 建 一 个 Ext 人 一 样 ， 因 为 要 月 





组 来 指定 表格 单元 格 的 内 容 ， 这 可 能 会 有 点 让 人 迷 








有 一 个 一 维 数 


我 们 可 以 肯定 ， 完 成 这 些 4 在 代码 清单 5-9 中 ， 你 将 创 





建 一 个 基本 的 3 x 3 的 Table 布 局 ， 如 图 $-11 所 示 。 





A Window with a Table layout X 
1 2 3 
4 5 6 
7 8 9 








图 5-11 ”代码 清单 5-9 中 首 个 Table 布 局 实现 的 结果 





代码 清单 5-9 一 个 基本 的 Table 布 局 
var myWin = Ext.create("Ext.Window", { 
height :300, 
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5.10 Table 
width je OO 
border : false, 
autoScroll : true, 
title : 'A Window with a Table layout', 
layout : { 0 
type table., 
columns : 3 
这 Ck 
defaults ct 
OSG ey mad 
width 3~ G0 
和 
items 2 
{ 
le 1 
和 
{ 
tn] 
> 
{ 
上 in 
ba 
t 
html : '4 
和 
{ 
em] 7 
}, 
{ 
iti i 6 
Fs 
{ 
html 7 
}, 
html : '8 
5 
{ 
Rem 9 








] 
3 


myWin.show(); 


代码 清单 5-9 中 的 代码 创建 了 一 个 窗口 容器 , 其 中 有 九 个 框 以 3 x 3 的 排列 方式 堆 琶 , 如 图 5-11 


所 示 。 到 现在 这 段 代码 大 多 数 应 该 看 似 很 熟悉 ， 











当 使 用 这 种 布局 时 一 定 要 记得 设置 这 个 属 怕 


宽 x 50 像 素 高 。 





E。 最 后 ， 把 所 有 子 项 的 defaults@ 


不 过 我 们 要 着 重 说 儿 点 。 其 中 最 明显 的 一 点 应 该 
是 布局 Lype 参 数 @, 设 为 'table'。 接 下 来 , 设置 一 个 布局 column 属 性 人 ,从 而 指定 列 的 数量 。 








属性 设 为 50 像 素 





经 常 需要 让 表格 的 某 些 部 分 跨越 多 行 或 者 多 列 。 为 了 实现 这 一 点 ,必须 要 在 子 项 上 显 式 指定 
rowspan 或 者 colspan 参 数 。 结 束 后 ， 布 局 应 该 如 图 5-12 所 示 。 








A Window with a Table layout x 
1 
2 3 4 
5 
6 7 8 
9 














图 5-12 ”在 使 用 Table 布 局 的 时 候 ， 你 可 以 为 某 一 个 特定 组 件 指定 rowspan 
和 colspan， 这 可 以 令 它 在 表格 中 包含 不 止 一 个 单元 格 


我 们 来 修改 表格 ， 让 子 项 可 以 跨越 多 行 或 者 多 列 ， 如 以 下 代码 清单 所 示 。 


代码 清单 5-10 ”探究 rowspan 和 colspan 























items : [ 

{ 
html Er 3 设置 跨 列 数 为 3， 
colspan : 3， 宽度 为 150 像 素 
width > 150 

ey 

{ 
html Ds 设置 跨行 数 为 2， 
rowspan : 2, 高 度 为 100 像 素 
height : 100 

3 

{ 
村 

{ 
html oT, 设置 跨行 数 为 2， 
rowspan : 2, 高 度 为 100 像 素 
height : 100 

人 

{ 
terol 5? 

}, 

{ 
html 6 

和 

{ 
Fin se 

La 

{ 
ti 2 "8 
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html Eo 设置 跨 列 数 为 3， 宽 
colspan : 3， 度 为 150 像 素 
width A 


] 


在 代码 清单 5-10 中 ， 重 用 了 现 有 的 代码 清单 5-9 中 的 container 人 代码， 并 替换 了 其 子 items 
数组 。 把 第 一 个 面板 @ 的 colspan 属 性 设 为 3， 并 且 和 手动 设 定 它 的 宽度 ， 以 符合 已 知 的 表格 整体 
宽度 ， 也 就 是 150 像 素 。 请 记 住 有 三 列 默认 尺寸 为 50 像 素 x 50 像 素 的 子 容器 。 接 下 来 ， 把 第 二 个 
子 项 @ 的 rowspan 属 性 设 为 2， 把 它 的 高 度 设 为 两 行 的 总 高 度 ， 也 就 是 100 像 素 。 对 面板 4 也 进行 
同样 的 操作 合 。 最 后 的 改动 涉及 面板 9, 它 的 属性 设置 跟 面 板 1 一 模 一 样 @。 改动 后 泻 染 的 表格 应 
该 如 图 5-12 所 示 。 

在 使 用 Table 布 局 时 ， 要 记 住 几 件 事 。 首 先 ， 要 确定 会 用 到 的 列 的 数量 ， 并 在 布局 的 column 
配置 属性 中 指定 。 其 次 ， 如 果 要 让 组 件 跨 越 多 行 和 /或 多 列 ， 就 一 定 要 相应 地 设置 它们 的 尺寸 ， 
否则 分 布 在 表格 中 的 组 件 就 会 无 法 正确 地 对 齐 。Table 布 局 通用 性 极 强 ， 可 以 用 来 创建 你 所 想象 
出 的 任何 一 种 基于 框 的 布局 ， 它 的 主要 局 限 是 它 没有 父子 尺寸 管理 功能 。 

我 们 的 Ext JS 布局 之 旅 走 到 了 最 后 一 站 ， 那 就 是 曾经 很 受 欢 迎 的 Border 布 局 ， 它 可 以 把 任何 
容器 划分 成 5 个 可 收缩 的 区 域 ， 管 理 它 们 子 项 的 尺寸 。 




























































































5.11 Border 布局 


Border 布 局 2006 年 首次 推出 ， 那 时 Ext 还 只 不 过 是 YUI 类 库 的 一 个 扩展 。 打 那 之 后 它 已 经 成 长 
为 一 个 具有 极 高 灵活 度 和 易 用 性 的 布局 ， 让 容器 可 以 完全 控制 其 子 项 或 者 区 域 。Border 布 局 被 公 
认为 是 一 种 把 复杂 应 用 划分 成 多 个 可 管理 区 域 的 简单 方法 并 得 到 广泛 应 用 。 这 些 区 域 被 恰当 地 根 
据 极 地 坐标 命名 为 北 、 南 、 东 、 西 和 中 。 图 $-13 展 现 了 一 个 用 ExtJS 开 发 工具 包 实 现 的 Border 布 局 。 
































north - generally for menus, toolbars and/or advertisements 


West « Close Me 三 | Center Panel East Side 
写 Navigation 二 Done reading me? Close me by 0 Name ^ Value 
Hi. I'm the west panel, clicking the X in the top right (name) Properties Grid 


corner. 
autoFitColumns true 
Vestibulum semper. Nullam non 


odio. Aliquam quam. Mauris eu borderWidth 1 
lectus non nunc auctor 


created 10/15/2006 
ullamcorper Sed tincidunt 
molestie enim. Phasellus lobortis groupmg false 
justo sit amet quam. Duis nulla productionQuality false 


erat, varius a, cursus in, tempor 

sollicitudin, mauris. Aliquam mi 
+ | velit, consectetuer mattis, 

consenuaf tristinue nulvinar ac 


tested false 
a 

Settings E33 ATab Property Grid * 

South 从 y 


south - generally for informational stuff, also could be for status bar 








图 5-13 ”Border 布 局 吸引 了 很 多 Ext JS 框架 的 新 开发 人 员 ， 它 在 很 多 
应 用 中 得 到 使 用 ， 把 屏幕 划分 为 以 任务 细 分 的 功能 区 域 
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根据 提供 的 配置 选项 不 同 , 用 户 可 以 对 区 域 进行 尺寸 调整 或 者 展开 折 准 。 还 有 一 些 配 置 选 项 
被 用 于 限制 区 域 的 尺寸 调整 ,或 者 防止 区 域 被 同时 调整 尺寸 。 

为 了 探究 Border 布 局 , 我 们 要 用 Viewport 类 ,如 代码 清单 5-11 所 示 , 这 样 就 更 可 以 更 容易 看 
到 这 项 练习 的 最 终结 果 。 


代码 清单 5-11 尝试 Border 布 局 























et 





Ext .create('Ext.Viewport', { a 
layout : 'border', 分 割 区 域 , 允许 调整 
defaults : { 尺寸 

frame : true, 


Sblit “teue 
i 


items : [ 


{ .9 添加 北部 区 域 
title : 'North Panel', 
region ,ot 
height D0 
minHeight A 
maxHeight i A 


collapsible : true 


a 


设置 可 调整 尺寸 的 
title : 'South Panel', 南部 区 域 
region oat 
height es 
包谷 开工 七 : false， 
margins 2 
oD CE 
} 
{ 2 配置 东部 区 域 
title : 'East Panel', 
region : 'east', 
width RN 
minWidth cs 
maxWidth SO: 
collapsible : true 
.9 添加 西部 区 域 
title : 'West Panel', 
region : 'west', 
collapsible : true, 
collapseMode : 'mini'， 
width 2 E00 
jy 
title : 'Center Panel', 


region : 'center' 


5.11 Border 布局 105 








在 代码 清单 5-11 中 ， 短 短 几 行 代码 你 就 用 viewport 实 现 了 很 多 功能 。 在 默认 的 配置 对 象 中 
把 layout 设 为 'border'@， 并 把 sp1lit 设 为 true。 这 里 同时 在 发 生 很 多 事情 ,所 以 请 随时 参考 
图 5-14， 其 中 描绘 了 泻 染 后 的 代码 是 何 模 样 。 


es 


West Panel Center Panel East Panel 


















































Eee 


图 5-14 Border 布局 的 多 功能 性 和 易 用 性 令 它 成 为 基于 Ext JS 
的 富 互联 网 使 用 应 用 中 最 广泛 的 布局 之 一 


然后 ， 开 始 实例 化 子 项 ， 它 们 都 拥有 Border 布 局 区 域 特有 的 参数 。 为 了 方便 查看 众多 参数 ， 
要 让 每 个 区 域 的 行为 不 同 于 其 他 区 域 ( 见 图 5-14 )。 

对 第 一 个 子 项 @， 把 region 属 性 设 为 'north' 以 确保 它 位 于 Border 布 局 的 顶端 。 对 于 带 框 
组 件 特有 的 参数 height ， 以 及 区 域 特有 参数 minHeight 和 maxHeignt ， 要 来 玩 点 花样 。 指 定 
height 为 100， 也 就 是 指示 该 区 域 把 面板 的 初始 高 度 泻 染 为 100 像 素 。minHeight 参 数 指示 相应 
的 区 域 不 允许 把 分 隔 条 拖 到 使 北部 区 域 满足 最 小 高 度 100 像 素 的 坐标 外 部 。maxHeight 参 数 也 是 
同样 的 道理 , 只 不 过 它 是 用 于 拓展 区 域 的 高 度 。 还 要 把 面板 特有 参数 collapsible 指 定 为 true， 
指示 该 区 域 允许 其 折 县 到 仅仅 30 像 素 高 。 

定义 南部 区 域 ， 也 是 视 口 的 第 二 个 子 项 加 ,设置 一 些 配置 项 以 防止 它 调整 尺寸 , 但 是 保持 布 
局 的 区 域 之 间 5 像 素 的 分 隔 条 。 通 过 把 split 设 为 false， 设 置 该 区 域 不 允许 调整 尺寸 。 这 样 做 
也 是 在 配置 该 区 域 忽略 5 像素 的 分 隔 条 ， 这 会 使 得 该 布局 在 外 观 上 有 些 不 完整 。 为 获得 修饰 性 的 
分 隔 条 ， 要 用 到 一 个 区 域 特有 参数 margin， 通 过 它 来 指定 南部 区 域 与 其 上 方 的 其 他 区 域 之 间 有 
一 个 5 像素 宽 的 缓冲 区 。 关 于 这 一 点 要 提醒 一 句 : 虽然 现在 布局 看 起 来 完整 了 ， 但 最 终 用 户 或 许 
还 会 试图 调整 尺寸 ， 可 能 令 他 们 徒 增 烦恼 。 

第 三 个 子 项 @ 被 定义 为 东部 区 域 。 这 个 区 域 的 配置 基本 上 跟 北部 面板 一 样 , 但 它 对 尺寸 调整 
的 约束 要 更 灵活 一 点 。 北部 区 域 刚 开始 的 时 候 被 设 为 其 最 小 尺寸 , 而 东部 区 域 的 初始 尺寸 介 于 它 
的 minWwigth 和 maxwidth 之 间 。 像 这 样 指定 尺寸 参数 可 以 让 UI 以 默认 或 者 指定 的 尺寸 显示 一 个 
区 域 ， 同 时 也 使 得 面板 可 以 调整 到 超出 其 原始 尺寸 。 

西部 区 域 @ 有 一 个 特殊 的 区 域 指定 参数 col1apseMode 设 为 字符 串 'mini'。 这 样 设置 参数 
指示 ExtJS 把 一 个 面板 折 又 到 只 有 5 像素 ， 从 而 为 中 心 区 域 提供 更 多 的 可 视 空间 。 图 5-15 展 现 了 区 
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已 之 用 


域 在 折 针 后 可 以 多 小 。 通 过 允许 spl1it 参 数 保持 true ( 还 记得 defaults 对 象 吗 ) 并 且 不 指定 最 
小 或 者 最 大 尺寸 参数 ， 西 部 区 域 可 以 在 浏览 器 允许 的 范围 内 随意 调整 尺寸 。 








Center Panel 


PO 


South Panel 


图 5-15 ”Border 布 局 ， 其 中 两 个 区 域 ( 北部 和 东部 区 域 ) 在 常规 模式 下 折 芋 ， 
而 西部 的 面板 在 微缩 模式 下 折 鲜 


最 后 一 个 区 域 是 中 心 区 域 ， 它 是 Border 布 局 唯一 必需 的 区 域 。 虽 然 中 心 区 域 看 起 来 空空 的 ， 
可 其 实 它 很 特别 。 中 心 区 域 通 常 开发 人 员 放 置 富 网 络 应 用 UI 组 件 的 背景 , 它 的 尺寸 取决 于 其 姊妹 
区 域 的 尺寸 。 

Border 布 局 虽然 有 很 多 优点 ， 但 也 有 一 个 很 大 的 缺点 ， 那 就 是 一 个 子 项 一 旦 在 一 个 区 域 中 定 
义 或 者 创建 ,就 无 法 更 改 。 而 解决 方法 非常 简单 。 对 每 一 个 想 要 更 换 组 件 的 区 域 ,都 指定 一 个 容 
带 作 为 区 域 。 让 我 们 尝试 一 下 ， 替 换 掉 代码 清单 5-11 中 的 中 心 区 域 代码 : 

{ 






























































xtype : 'container', 

Ledion -cernter., 

ayout se “ -ELt. 

id : 'CenterRegion', 

items : { 
title : 'Center Region', 
id : 'CenterPanel', 
html : 'I am disposable', 
frame : true 


} 
请 记 住 视 口 只 能 创建 一 次 , 所 以 必须 要 刷新 一 次 示例 代码 所 在 的 页 面 。 刷 新 过 的 视 口 应 该 看 
起 来 跟 图 $-15 几 乎 一 模 一 样 ， 唯 一 不 同 的 是 现在 中 心 区 域 有 HTML 显 示 它 是 可 自由 处 置 的 。 在 上 
面 这 个 示例 中 ,你 用 一 个 值 为 ' fit' 的 layout 属 性 和 一 个 可 以 用 在 Firebug JavaScript 控 制 台中 的 
id 定义 了 容 需 的 XType。 

回想 我 们 之 前 关于 在 容器 上 添加 和 删除 子 组 件 的 讨论 和 练习 ,还 记得 怎么 根据 组 件 的 id 获得 
该 组 件 的 引用 并 删除 一 个 子 项 吗 ? 如 果 能 记得 , 那 好 极 了 ! 如 果 记 不 得 , 那 我 们 已 经 蔡 你 完成 了 ! 
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不 过 一 定 要 复习 之 前 的 章节 ， 因 为 它们 对 于 管理 ExtJS UI 非常 重要 。 我 们 来 尝试 一 下 替换 中 心 区 
域 的 子 组 件 ， 如 以 下 代码 清单 所 示 : 


代码 清单 5-12 ”替换 中 心 区 域 的 一 个 组 件 
Var centerPanel = Ext.getCmp('centerPpanel'), 
centerRegion = Ext.getCmp('centerRegion'); 


centerRegion.remove (centerPanel, true); 


centerRegion.add(t{ 





xtype ?Os 
frame oat 
bodyStyle ; "padding: Spx', 
defaultType : 'field', 
title : 'Please enter some information', 
defaults { 
ancher™: “sl02 
ss 
items 2 
{ 
fieldLabel : 'First Name' 
}, 
fieldLabel : 'Last Name' 
站 
{ 
xtype : 'textarea', 
fieldLabel : 'Bio' 


] 
F)3 
代码 清单 5-12 用 到 了 你 目前 学 到 的 所 有 与 组 件 、 容 器 和 布局 相关 的 知识 ,给 你 提供 了 较 大 的 
灵活 性 ， 以 相对 简单 的 方法 把 中 心 区 域 的 子 项 , 也 就 是 一 个 面板 替换 为 一 个 表单 面板 。 你 可 以 在 
任何 区 域内 使 用 这 种 办 法 随意 蔡 换 各 项 。 
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本 章 探 究 了 为 数 众多 且 用 途 广泛 的 Ext JS 布局 方案 , 带 你 了 解 了 各 种 布局 的 强项 .弱项 和 缺陷 。 
请 记 住 ， 虽 然 很 多 布局 可 以 实现 相似 的 功能 ， 但 它们 在 UI 里 各 司 其 职 。 到 底 用 哪 种 布局 来 显示 组 
件 或 许 并 不 是 那么 一 目 了 然 ， 如 果 你 是 UI 设 计 新 手 的 话 是 需要 一 些 练习 的 。 

如 果 在 看 完 后 对 于 本 章 的 内 容 感觉 并 非 100% 有 把 握 ， 那 么 我 们 建议 你 往 下 看 ， 过 一 段 时 间 
以 后 再 来 复习 一 下 ， 这 些 内 容 需 要 花 点 儿 时 间 消 化 吸收 ; 最 好 是 在 你 开始 学 习 本 书 第 三 部 分 时 。 
现在 我 们 已 经 讲解 了 很 多 核心 主题 ， 现 在 请 系 好 安全 带 ， 因 为 下 面 的 内 容 更 精彩 。 接 下 来 ， 
你 要 学 习 更 多 关于 Ext JS UI 部 件 的 内 容 ， 首 先是 表单 。 







































































Ext JS 中 的 表单 








本 章 内 容 

口 探究 表单 面板 输入 
口 创建 自 定义 组 合 框 模板 

口 创建 一 个 复杂 的 布局 表单 面板 


Iml 








前 文 介绍 了 如 何 用 Ext JS 框架 中 的 多 种 布局 管理 器 组 织 UI 部 件 。 本 章 开 始 ， 我 们 将 切入 实例 
化 和 管理 Ext JS 表单 元 素 的 内 容 。 毕 竟 ， 没 有 用 户 输入 怎么 能 算是 应 用 呢 ? 

所 以 也 难怪 开发 和 设计 表单 是 网 页 开发 人 员 的 一 项 常规 任务 。 管 理 表 单 校 验 是 几 年 前 
JavaScript 的 主要 用 途 。Ext JS 超越 了 典型 的 表单 校 验 ， 基 于 基本 的 HTML 输 入 框 构建 而 成 ， 既 为 
开发 人 员 增 加 了 特色 功能 又 提升 了 用 户 体验 。 举 例 来 说 ， 如 果 用 户 被 要 求 往 一 个 表单 中 输入 
HTML。 使 用 原始 的 多 行文 本 框 时 ， 用 户 必须 手工 输入 HTML 内 容 。 在 EXT JS HTML 编辑 器 中 则 
无 需 如 此 , 你 可 以 获得 一 个 完全 “所 见 即 所 得 ”的 输入 框 , 使 用 户 可 以 轻松 地 输入 内 容 和 操作 格 
式 丰 富 的 HTML。 

本 章 ， 我 们 将 探讨 表单 面板 ， 介 绍 Ext JS 的 众多 表单 输入 类 。 你 还 将 了 解 如 何 基于 布局 和 容 
器 模型 构建 复杂 的 表单 ， 并 用 它 通 过 Ajax 提交 和 读 取 数据 。 

为 输入 框 要 谈 的 东西 有 很 多 , 本 章 将 遵循 类 似 食谱 的 风格 为 你 依次 讲解 很 多 ExtJS 输 入 框 ， 
比如 一 般 的 单行 文本 输入 框 、 多 行文 本 框 和 数字 输入 框 。 我 们 要 来 详细 探究 组 合 框 , 那 是 一 种 结 
合 了 简单 的 单行 文本 框 与 自 定义 下 拉 框 的 输入 框 ， 可 以 算得 上 是 Ext JS 框架 中 实现 起 来 最 复杂 的 
输入 框 。 当 你 扎实 地 掌握 了 这 些 输入 框 的 相关 知识 后 , 要 把 它们 融会 贯通 , 我 们 将 一 起 实现 并 讨 
论 FormPanel 类 ， 让 你 详细 了 解 如 何 保存 和 读 取 数据 o 


6.1 基本 输入 框 


Ext JS 表 单 输入 控件 及 其 子 类 给 现 有 的 HTML 输 入 框 增加 了 诸如 基本 校 验 , 自 定义 认证 方法 ， 
自动 调整 大 小 和 键盘 过 滤 之 类 的 功能 。 要 使 用 诸如 键盘 过 滤器 ( 掩 码 ) 和 自动 字符 剥离 之 类 的 更 
强大 功能 ， 你 就 需要 了 解 正则 表达 式 。 
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进一步 了 解 如 何在 JavaScript 中 使 用 正则 表达 式 
如 果 不 熟 悉 正 则 表达 式 , 网 上 有 大 量 的 相关 信息 供 你 参考 ,我 们 最 喜欢 的 学 习 该 主题 的 网 
站 之 一 是 : www.regularexpressions.info/javascript.html。 


6.1.1 输入 框 和 校 验 


我 们 要 一 次 性 地 探讨 输入 框 的 好 几 个 功能 。 请 务必 耐心 ， 因 为 某 些 示 例 代码 可 能 会 很 长 。 
输入 框 是 作为 表单 面板 的 子 元 素 构建 的 ， 以 便于 跟踪 显示 方面 的 问题 。 首 先 你 要 创建 items 
数组 ， 其 中 将 包含 不 同 单行 文本 框 的 XType 定 义 ， 如 以 下 代码 清单 所 示 。 


代码 清单 6-1 文本 输入 框 
Ext .QuickTips.init(); 
Var fpItems =[ 


{ 























fieldLabel : 'Alpha only', 下 指定 空 输入 框 
allowBlank : false, 
emptyText : 'This field is empty!', 
maskRe [A=] 5 
msgTarget  : 'side' 

. 指定 唯 字母 字符 
fieldLabel : 'Simple 3 to 7 Chars', 受权 
allowBlank : false, 容许 的 最 小 /最 大 字 
msgTarget : 'under', 符 数 
minLength : 3， 
maxLength : 7 

a 

{ 
fieldLabel : 'Special Chars Only', 
msgTarget : 'atip', nh 只 容许 特殊 字符 
stripCharsRe : /[a-zA-2Z20-9]/ig 

ja 

{ 
fieldLabel : 'Web Only with VType', 
Vvtype : "url', ww 使 用 ur1 VType 
msgTarget : 'side' 


, } 
在 代码 清单 6-1 中 ， 你 必须 要 从 很 多 角度 入 手 展示 简单 的 单行 文本 框 的 功能 。fpItems 数 组 
中 创建 的 是 4 个 单行 文本 框 。 每 个 子 元 素 所 拥有 的 匈 余 属性 之 一 是 fieldLabel， 也 就 是 显示 在 
field 元 素 对 应 的 lapbel 元 素 中 的 文本 。 

对 于 第 一 个 子 元 素 ， 你 要 指定 a1l1owBlank 为 false 确 保 该 输入 框 不 能 为 空 ， 从 而 也 确保 使 
用 到 ExtJS 的 一 项 基本 输入 框 校 验 功 能 。 你 还 给 emptyText 赋 了 一 个 字符 串 值 @, 显示 帮助 文本 ， 
它 可 以 被 用 作 默 认 值 。 有 一 点 很 重要 值得 注意 , 那 就 是 它 可 以 在 表单 提交 中 作为 该 输入 框 的 值 提 
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交 。 接 下 来 设置 正则 表达 式 掩 码 maskRe@， 使 之 过 滤 掉 那些 非 字 母 字符 的 按键 。 第 二 个 单行 文 





本 框 被 设计 为 不 能 为 空 ， 而 





旦 必须 输入 3~7 个 字符 才能 通过 校 验 。 你 可 以 通过 设置 minLength@e 





和 maxLength 参 数 来 实现 。 第 三 个 单行 文本 框 可 以 为 空 ,但 它 有 自动 字数 字符 剥离 功能 。 你 可 以 








给 stripcharsRe 属 性 @ 指 定 





一 条 有 效 的 正则 表达 式 来 实现 自动 剥离 。 对 于 最 后 一 个 子 元 素 @， 

















你 使 用 VType url 来 检查 输入 的 值 是 否 是 一 个 URL。 以 下 代码 清单 将 创建 一 个 表单 面板 来 演 染 输 


入 框 。 
代码 清单 6-2 为 单行 文本 机 





Var fp = Ext.createl(' 


E 构 建 表单 面板 


Ext .form.Panel', 


{ 


renderTo : Ext.getBody(), 
width :O00 
height A 
title : 'Exercising textfields', 
frame 2 UG 
bodyStyle : 'padding: 6px', 
labelWidth  : 126, oe 
defaultType : 'textfield', 默认 XType 
defaults :A 
msgTarget : 'side', 
je ep 
items : fpItems 息 目标 


}); 








项 。 把 aefaultType 


代码 清单 6-2 中 的 大 部 分 代码 你 都 应 该 很 熟悉 。 不 过 让 我 
属性 @ 设 为 'textfielq'， 以 此 来 覆盖 上 默认 的 组 件 Xtype， 而 如 果 你 还 记得 ， 





站 来 复习 几 个 与 组 件 模型 相关 的 关键 








这 么 做 可 以 确保 你 的 对 象 融入 单行 文本 框 。 你 还 设置 了 一 些 默 认 值 @@， 这 可 以 确保 报错 信息 目标 
































位 于 输入 框 右 侧 ， 此 外 设置 anchor 属 性 。 最 后 把 表单 面板 的 items 配 置 设置 成 之 前 创建 的 
ftpItems 变 量 ， 其 中 包含 4 个 单行 文本 框 。 演 染 后 的 表单 面板 应 该 如 图 6-1 所 示 。 

Exploring text fields 

Alpha only: 

Simple 3 to 7 

Chars: 

Special Chars 

Only: 

Web Only with 

VType: 

图 6-1 表单 面板 的 泻 染 结 果 ， 其 中 包含 4 个 单行 文本 框 





请 注意 在 图 6-1 中 ， 文 本 输入 村 























E 右 侧 有 一 点 多 余 的 空间 。 这 是 因为 必须 确保 校 验 报错 信息 








显示 在 单行 文本 框 的 右 侧 。 
因 。 可 以 执行 校 验 的 方式 有 




















这 就 是 把 表单 面板 定义 中 默认 对 象 的 msgTarget 设 为 'side' 的 原 
两 种 : 聚焦 或 者 散 焦 (使 之 失去 焦点 ) 一 个 输入 框 ， 或 者 执行 一 个 

















全 表单 的 isvaligd 方 法 调用 ,fp.getForm() .isvalid()。 图 6-2 展 现 了 校 验 发 生 后 输入 框 都 
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@ This field is required 


是 什么 样 。 
Exploring text fields 
Alpha only: 
Simple3to7 
Chars: 
Special Chars 
Only: 
Web Only with i 
Vrype: This 


is not a valid web URL 





@Y This field should be a URL in the format 


"http://www.example.com" 














图 6-2” 校 验 错误 信息 

















每 个 输入 框 都 可 以 有 自己 的 msgTarget 特 性 ， 它 可 能 是 以 下 5 种 属性 之 一 。 


D [elementid]: 
请 注意 只 有 在 输入 村 
响 报 错 信 息 的 显示 方式 。 








D atip: 触发 mouseover 事 件 会 显示 一 个 Ext JS 小 技巧 。 
Dtitle: 在 默认 浏览 器 标题 区 显示 报错 信息 。 

口 under: 把 报错 信息 显示 在 输入 框 之 下 。 

口 siqe: 在 输入 框 的 右 侧 泻 染 一 个 惊叹 号 图 标 。 





把 报错 信息 的 文本 作为 目标 元 素 的 innerHTML 添 加 。 
EE 位 于 一 个 输入 框 容器 (通常 是 表单 面板 ) 内 部 时 , msgTarget 特 性 才 影 
如 果 单 行文 本 框 被 演 染 成 页 面 上 某 处 的 某 个 任意 元 素 (使 用 renderTo 














或 者 applyTo )， 那 msgTarget 将 只 被 设置 为 Eitle。 我 们 建议 花 点 时 间 试 用 不 同 的 msgTarget 
值 , 这 样 你 在 构建 首 个 实用 表单 的 时 候 可 以 更 好 地 了 解 它们 的 工作 原理 。 让 我 们 来 看 看 如 何 使 用 
单行 文本 框 创建 密码 和 文件 上 传 框 。 


6.1.2 ”密码 和 文件 选择 框 
为 创建 一 个 密码 输入 框 ， 你 要 选择 password 输 入 类 型 ， 而 对 于 文件 输入 框 ， 要 把 xtype 设 





erield, 


在 Ext JS 中 要 生成 这 些 输入 框 ， 就 输入 以 下 代码 : 


Var fpItems =[ 


{ 


fieldLabel : 
allowBlank : 


inputType 


fieldLabel : 
allowBlank : 


xtype 


'Password', 
false, 
1 "Dassword:’; 


'File', 
false, 
: 'filefield' 
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图 6-3 展 现 了 表单 面板 中 密码 和 单行 文本 框 的 泻 染 版 本 。 




















Exploring text fields Exploring text fields 

Password: Password: |@ 

File: C:\fakepath\ch03_garcia_Ext]S_fn| Browses. File: ,Browse... R 
图 6-3 已 填写 数据 的 密码 和 文件 上 传 框 ( 左 ) 和 一 个 侧面 校 验 报错 图 标的 示例 











我 们 已 经 介绍 了 很 多 关于 文本 输入 框 、 输 入 机 




















看 看 其 他 输入 框 。 
6.1.3 ”构建 多 行文 本 杠 





E 校 验 和 密码 及 文件 上 传输 入 框 的 内 容 , 现在 来 








TextArea 类 扩展 了 TextFieldq 类 。 多 行文 本 框 是 一 个 多 行 的 输入 村 
与 构建 一 个 单行 文本 框 类 似 , 只 是 必须 要 考虑 到 组 件 的 高 度 。 以 下 是 一 个 拥有 























度 的 多 行文 本 框 示 例 : 
{ 
xtype : 'textarea', 
fieldLabel : 'My TextArea', 
name : 'myTextArea', 
anchor TTL00%*; 
height :100 


} 











匡 。 构 建 一 个 多 行文 本 框 
固定 高 度 和 相对 宽 


























就 是 这 么 简单 。 我 们 来 快速 了 解 一 下 如 何 使 用 数字 输入 框 。 


6.1.4 ”便利 的 数字 输入 框 


有 时 候 开 发 需求 要 求 你 放置 一 个 只 允许 输入 数字 的 输入 框 。 这 你 可 以 用 单行 文本 机 


而 且 你 要 施加 自己 的 校 验 ,但 干 嘛 要 多 此 一 举 呢 
点 数 的 所 有 校 验 。 让 我 们 来 创建 一 个 数字 输入 杠 
许 输入 特定 值 : 


‘ 








E 来 实现 ， 
? 数字 输入 框 茜 本 上 可 以 蔡 你 完成 对 证 书 和 浮 
， 它 接受 精确 到 千 分 之 一 的 浮 点 数 ， 并 且 只 允 





xtype : 'numberfield', 
fieldLabel : 'Numbers only', 
allowBlank : false, 

emptyText :. "This. field 1s emptyl, 
decimalPrecision : 3， 

minValue 2 .000 

maxValue 2 


} 


为 了 把 需求 应 用 于 这 个 数字 输入 框 , 你 要 指定 aecimalPrecision minvalue 和 maxValue 
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属性 。 这 样 可 以 确保 任何 小 数 点 后 多 于 3 位 的 浮 点 数 都 会 被 四 舍 五 人 。 同 样 ， 设 置 minValue 和 
maxValue 属 性 是 为 了 确保 输入 的 有 效 数字 有 效 范围 为 0.001 ~ 2。 任 何在 此 范围 以 外 的 数字 都 被 
视 为 无 效 ，Ext JS 会 对 其 进行 无 效 标识 。 数 字 输 入 框 泻 染 后 外 观 上 看 跟 单行 文本 框 一 样 ， 只 是 增 
加 了 儿 个 触发 右 (按钮 )， 让 用 户 可 以 通过 鼠标 点 击 来 增 大 或 者 减少 数字 。 男 外 还 有 几 个 属性 可 
以 帮助 你 对 数字 输入 框 进行 配置 。 

我 们 已 经 看 过 了 文本 输入 框 ， 多 行文 本 框 和 数字 输入 框 ， 
组 合 框 。 


6.2 用 组 合 框 实现 提前 键入 


命名 恰如其分 的 组 合 框 就 像 是 多 功能 的 文本 输入 框 。 它 融合 了 一 个 通用 文本 输入 框 和 一 个 通 
用 下 拉 框 ,形成 了 一 个 使 用 灵活 ， 可 配置 性 极 强 的 组 合 输入 框 。 组 合 框 可 以 实现 在 文本 输入 区 自 
动 填 充 文本 ( 也 就 是 所 谓 的 提前 键入 )， 而 且 它 可 以 连接 远程 数据 存储 ， 与 服务 絮 端 配合 过 滤 结 
果 。 如 果 组 合 框 执行 的 是 针对 一 个 大 型 数据 集 的 远程 请 求 ， 那 你 可 以 通过 设置 pagesize 属 性 来 
实现 结果 分 页 。 图 6-4 展 现 了 一 个 远程 读 取 和 分 页 组 合 框 的 详细 结构 。 


自动 填充 的 
文本 (绿色 ) 
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现在 再 让 我 们 来 看 看 它们 的 远亲 : 
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Search the Ext JS Forums xX 
触发 器 
Query string: How to install Forum Search 4 .= 


How to install Forum Search 
EditorSridPanel Comboboxes 


本 列表 框 
combobox disable enable 


EditorSridPanel With ComboBoxes = ! 





Overwrite timeField [ 具 栏 


分 页 工具 
Pagel1 jof 1630| 上 "i 
图 6-4 一 个 带 提前 键入 功能 的 远程 读 取 和 分 页 组 合 框 的 示例 UI 


在 我 们 学 习 运 用 组 合 框 之 前 ， 先 来 看 看 怎么 构建 组 合 框 。 因 为 你 已 经 熟悉 了 如 何 布置 子 元 
素 ， 这 是 一 个 把 新 学 到 的 知识 投入 实践 的 大 好 机 会 。 所 以 从 现在 起 ， 当 我 们 讨论 不 包含 子 元 素 
的 项 ， 比 如 输入 框 的 时 候 ， 我 们 会 让 你 自己 来 构建 一 个 容器 。 你 可 以 使 用 代码 清单 6-2 中 的 表 
单 面板 。 


6.2.1 构建 一 个 本 地 组 合 框 


创建 一 个 单行 文本 框 相 比 构建 一 个 组 合 框 来 说 很 简单 。 这 是 因为 组 合 框 是 对 于 一 个 叫 aata 
Store 的 类 有 直接 的 依赖 关系 ， 它 是 Ext JS 框架 中 管理 数据 的 主要 工具 。 本 章 我 们 将 简单 介绍 这 












































114 第 6 


章 ExtJS 中 的 表单 








个 支撑 类 ， 在 第 7 童 我 们 将 深入 探讨 它 的 细节 。 在 下 面 的 代码 清单 中 ， 你 将 使 用 一 个 XType 配 置 

















对 象 来 构建 第 一 个 组 合 框 。 
代码 清单 6-3 ”构建 第 一 个 组 合 杠 


var mySimpleStore = ({ 
type eh 
fields : ['name'], 本 构建 数组 
data 站 ， 
['Jack Slocum'], 数据 存储 
['Abe Elias'], 
['Aaron Conran'], 
['Evan Trimboli'] 
] 
ri 
var combo = { 
xtype : 'Combo', | 在 组 合 框 中 指定 
fieldLabel : 'Select a name', 数据 存储 
store : mySimp1leStore， 
displayField : 'name', 
a 6 设置 显示 文本 杠 


好 


2 LOGal 
把 组 合 框 设 为 本 


地 模式 


代码 清单 6-3 构 建 了 一 个 读 取 数组 数据 的 简单 数据 存储 ， 也 就 是 所 谓 的 数组 数据 存储 @@〈 它 


是 Ext .data.Store 类 的 一 个 预 配置 扩展 )， 让 你 可 以 方便 地 创建 




















| 


个 能 消化 数组 数据 的 数据 存 














储 。 你 填充 可 消耗 的 数组 数据 ， 并 把 它 设 置 为 配置 对 象 的 aata 属 性 。 接 下 来 把 fields 属 性 指定 








为 一 个 数据 点 数组 , 数据 存储 将 利用 它 来 读 取 和 组 织 记 录 。 因 为 每 个 数组 只 有 一 个 数据 点 ， 所 以 
只 指定 单个 数据 点 ， 并 把 它 命名 为 'name' 。 而 且 ， 我 们 将 在 第 7 章 深 入 探讨 数据 存储 的 细节 ， 而 


你 也 将 学 到 从 数据 记录 到 连接 代理 的 全 部 相关 知识 。 

你 把 组 合 框 指定 为 一 个 简单 的 POJSO ( 普通 老式 JavaScript 对 象 )， 把 xtype 属 性 设 为 'combo' 
以 确保 它 的 父 容器 调用 正确 的 类 。 你 把 之 前 创建 的 简单 数据 存储 的 引用 指定 为 store 属 性 @, 还 记 
得 给 数据 存储 设置 的 fields 属 性 吗 ?adisplayFie19@@ 与 组 合 框 正在 使 用 的 数据 存储 对 应 的 输入 

















框 直接 相关 联 。 























因为 有 单个 输入 框 ， 你 会 用 那个 单独 的 输入 框 ， 也 就 是 'name' ， 指 定 aisplay- 


Fielg。 最 后 把 mode@ 设 为 '1ocal', 这 可 以 确保 数据 存储 不 会 尝试 远程 读 取 数据 。 正 确 设 置 这 个 
属性 很 重要 ， 因 为 mode 的 默认 值 是 'remote'， 这 可 以 确保 所 有 数据 都 通过 远程 请 求 读 取 。 如 果 忘 
了 把 它 设 为 '1ocal ' 会 导致 一 些 问题 。 图 6-5 展 现 了 组 合 框 演 染 后 是 什么 样 。 





















































X 
Select a name: vo 
Jack Slocum Wy 
Abe Elias 
Aaron Conran 
Evan Trimboli 


图 6-5 代码 清单 6-3 中 在 窗口 内 部 泻 染 的 组 合 


Iml 
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为 了 探索 过 滤 和 提前 键入 功能 , 你 可 以 立刻 开始 在 文本 输入 框 内 输入 。 现在 记录 集 里 只 包含 
4 条 记录 ， 不 过 你 可 以 一 完 它 的 运行 原理 了 。 在 单行 文本 框 里 输入 一 个 或 多 个 字母 会 触发 提前 键 
和信。 作为 尝试 ， 键入， 你 会 看 到 输入 框 里 被 自动 填 人 了 'Abe Elias'， 这 是 列表 预先 选中 的 记 
录 。 同 样 的 ， 输入 'Jac' 会 导致 'Jack Slocum' 被 自动 填 和 信 ， 而 它 对 应 的 记录 被 预先 选中 。 就 
这 样 ， 一 个 本 地 组 合 框 构建 好 办 法 。 
如 果 有 最 低 数量 的 静态 数据 ， 使 用 本 地 组 合 框 很 棒 。 不 过 它 既 有 优点 ， 又 有 缺点 。 它 的 主要 
优点 是 数据 不 一 定 要 远程 读 取 。 而 当 有 极 多 的 数据 需要 解析 的 时 候 , 这 反而 成 了 一 个 巨大 的 缺点 ， 
会 导致 UI 速 度 减 慢 、 停 顿 ， 甚 至 夏 然而 止 ， 弹 出 让 人 不 乐 见 到 的 “这 条 脚本 运行 时 间 过 长 ” 报 
错 框 。 这 时 候 就 用 到 远程 读 取 的 组 合 框 了 。 


6.2.2 ”实现 一 个 远程 组 合 框 


使 用 一 个 远程 组 合 框 比 实现 一 个 静态 组 合 框 要 复杂 一 点 。 这 是 因为 有 服务 器 端的 代码 要 处 
理 ,， 其 中 会 引入 某 种 类 型 的 服务 器 端 数 据 存 储 ， 比如 数据 库 苗 。 了 让 你 集中 精力 尝试 组 合 框 ,我 
们 使 用 预先 构建 的 PHP 代 码 (http://extjsinaction.com/dataQuery.php )， 其 中 包含 随机 生成 的 名 称 和 
地 址 。 现 在 让 我 们 来 实现 远程 组 合 框 ， 如 以 下 代码 清单 所 示 。 


代码 清单 6-4 ”实现 一 个 远程 读 取 组 合 框 


Var remoteJsonStore = Ext.create(Ext.data.JsonStore, { 































































































StoreId : 'people', 
fields : |[ 
'fullName', 
rid’ 
J 
proxy : { 
type 'jsonp', 
url 'http://extjsinaction.com/dataQuery .php', 
reader : { 
type "Son 
root 'records', 
totalProperty : 'totalCount 指定 根 属性 
} 
} 
Var combo = { 
xtype oonmbo™; 
queryMode 'remote', 
fieldLabel 'Search by name', 
width 2 
forceSelection : true, 
displayField 'fullName', 配置 自动 填 
valueField Ga 充 阅 值 
minChars » Ls 
triggerAetion, x: "dall"; 
store : remoteJsonStore 
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在 代码 清单 6-4 中 ， 你 把 数据 存储 的 类 型 改 为 Bxt.dqata.store 类 的 一 个 预 配置 扩展 
JsonStore@, 以便 方 便 地 创建 可 以 使 用 JSON 数 据 的 数据 存储 。 然 后 指定 fieldas， 它 现在 是 一 
个 数据 , 包含 单个 对 象 ' ful Iname ' 。 你 还 针对 每 条 记录 的 ID 创建 了 一 个 映射 , 将 用 于 数据 提交 。 
最 后 为 数据 存储 指定 了 一 个 proxy 属 性 ， 在 其 中 创建 一 个 JsonP 代 理 的 新 实例 ， 这 个 工具 被 用 于 




















跨 领域 请 求 数 据 。 你 指示 JsonP 代 理 通 过 ur1 属 性 从 一 个 特定 的 URL 读 取 数 据 。 





在 创建 组 合 框 的 时 候 把 forceselection 设 为 Ltrue， 这 有 助 于 远程 过 滤 (在 这 里 ， 也 包括 











提前 键入 ), 但 这 也 阻止 用 户 任意 输入 数据 。 接 下 来 把 ai splayFielgd 设 为 'fullName'， 这 会 在 
单行 文本 框 里 显示 全 名 的 数据 点 , 而 且 你 把 valueField 设 为 'ia', 可 确保 在 请 求 提交 组 合 框 数 














据 的 同时 ， 使 用 ID 来 发 送 数据 。hidaenName 属 性 经 常 被 人 忽视 ， 但 它 很 重要 。 因 为 你 要 显示 人 


名 但 却 提交 ID ， 所 以 你 需要 借助 DOM 中 的 一 个 元 素来 存储 该 ID 值 。 





minChars 属 性 @ 定 义 在 组 合 框 执行 数据 存储 读 取 之 前 需要 输入 单行 文本 框 的 最 小 字符 数 ， 
你 可 以 覆盖 它 的 默认 值 4。 最 后 把 Eriggeraction 设 为 'al1'， 这 指示 组 合 框 为 所 有 数据 执行 一 

















次 数据 存储 读 取 查询 。 图 6-6 展 现 了 新 构建 的 组 合 框 示例 。 





Search by name: Sal be 
Sacha Garrison 和 
Sade Carney 
Sage Dennis 
Sage Parsons 
Sage Tucker 
Salvador Moss 


图 6-6 ”代码 清单 6-4 中 的 远程 读 取 组 合 框 





试验 一 下 演 染 后 的 结果 , 你 会 看 到 使 用 远程 过 滤 对 用 户 来 说 是 多 有 趣 的 一 件 事 。 我 们 来 看 看 











从 服务 器 传 回 的 数据 是 如 何 被 格式 化 的 (图 6-7 )。 
根 


包含 对 象 的 数组 
{ 2 


"id” : "1569" 


对 象 封装 fullName" : "Abel Hatfield", 





映射 的 输入 框 
图 6-7 ”服务 器 生成 的 JSON 片 段 的 分 解 图 


研究 这 一 小 段 生 成 的 JSON 人 代码， 你 可 以 看 到 远程 的 组 合 框 JSON 数 据 存储 中 指定 的 根 ， 以 及 
映射 到 的 fullName 输 入 框 。 根 包含 了 一 个 对 象 数组 ， 数 据 存储 会 对 它 加 以 转化 。 然 后 数据 存储 
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将 移 除 所 有 映射 为 "fieldas" 的 属性 。 因 为 映射 了 ida 和 fullName， 那 些 输 入 框 将 被 数据 存储 吸 
收 。 所 有 其 他 属性 都 将 被 忽略 

在 实现 服务 器 端 代 码 时 遵循 图 6-7 中 的 格式 ， 这 有 助 于 确保 你 的 JSON 格 式 正 确 。 如 果 你 不 确 
定 ， 可 以 使 用 在 线 工 具 (http:Wjsonlint.com )， 粘 贴 自 己 的 JSON， 对 其 进行 解析 和 校 验 。 

在 查看 代码 清单 6-4 中 示例 代码 的 执行 结果 时 ， 你 可 能 会 注意 到 当 点 击 触发 器 时 ，UI 的 旋转 
进度 条 会 停顿 一 小 会 儿 。 这 是 因为 数据 库 里 的 所 有 2000 条 记录 正 被 发 送 给 浏览 器 并 进行 解析 , 此 
时 发 生 DOM 操 作 清空 列 表 框 并 创建 一 个 节点 。 对 于 这 个 大 数据 集 而 言 ， 数 据 的 转移 和 解析 速度 
相对 是 快 的 。 DOM 操 作 是 JavaScript 慢 下 来 的 主要 原因 之 一 , 也 是 为 什么 旋转 进度 条 动画 会 停止 。 
搬入 2000 个 DOM 元 素 所 需 的 资源 数量 巨大 ， 乃 至 浏览 髓 不 得 不 中 断 所 有 动画 ， 把 注意 力 集中 在 
手头 的 任务 上 , 更 别提 一 下 向 用 户 倾 海 这 么 多 记录 所 可 能 带 来 的 可 用 性 问题 了 。 为 了 缓解 这 些 问 
题 ， 你 应 该 启用 分 页 功能 。 
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运 的 是 ,你 使 用 的 PHP 代 码 中 已 经 有 必要 的 代码 来 适应 即将 做 出 的 改动 。 你 要 做 的 第 一 个 改动 是 
给 JSON 数 据 存储 添加 以 下 属性 : 


下 








totalProperty :'totalCount' 


接 下 来 你 要 在 组 合 框 中 启用 分 页 功能 ， 具 体 的 方法 是 添加 一 个 pagesize 属 性 : 














pageSize :20 


这 就 行 了 ! Ext JS 现在 准备 好 在 组 合 框 中 启用 分 页 功能 了 。 刷 新 浏览 器 的 代码 ， 然 后 或 者 点 
击 触发 右 或 者 在 文本 输入 框 里 输入 几 个 字符 ， 你 就 会 看 到 所 做 改动 的 结果 ， 如 图 6-8 所 示 。 











x 


Search by name: be 2 
‘BeatriceCox | 
Beatrice Dean [ 
Beatrice perltns 


Beatrice Savage 
Beatrice Snyder 
Beau Harrell 
Beau Roberts 
Beck Mcquire 
Pagej1 lof2| bP » 








图 6-8 ” 往 远 程 组 合 框 中 添加 分 页 功能 


目前 ， 我 们 已 经 谈 久 了 组 合 框 的 UI， 并 实现 了 array 和 JSON 数 据 存储 的 本 地 和 远程 版 本 。 
虽然 我 们 已 经 介绍 了 组 合 框 的 很 多 方面 , 目前 还 只 不 过 把 它 用 作 一 个 加 强 版 的 下 拉 框 , 我 们 还 没 
有 讨论 过 如 何 自 定义 结果 数据 的 外 观 。 为 了 展示 为 什么 要 改动 一 些 东西 ， 比 如 内 模板 ,我 们 必须 
先 来 快速 了 解 一 下 组 合 框 的 内 部 机 制 。 
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6.2.3 ”解构 组 合 框 


在 组 合 框 的 内 核 中 有 两 个 辅助 类 。 我 们 已 经 接触 过 了 数据 存储 , 它 提 供 了 数据 读 取 和 加 载 功 
能 , 但 我 们 还 没有 讨论 数据 视图 ， 这 个 组 件 负责 在 列表 框 里 显示 结果 数据 ， 以 及 提供 必需 的 事件 
以 允许 用 户 选择 数据 。 数据 视图 通过 注册 到 诸如 'beforeload'、'datachanged' 和 'clear' 
的 事件 来 绑 定 数据 存储 。 它 们 使 用 XTemplate ，XTemplate 提 供 DOM 操 作 ， 以 基于 你 提供 的 HTML 


模板 来 生成 HTML 











。 你 已 经 简单 看 过 了 一 个 组 合 框 的 组 件 ， 现 在 可 以 继续 创建 自 定义 组 合 框 了 。 








6.2.4” 自 定义 组 合 框 


在 组 合 框 中 局 





用 分 页 功能 后 , 你 只 能 看 到 名 字 。 可 如 果 想 看 到 完整 的 地 址 以 及 所 要 搜索 的 名 


字 呢 ?数据 存储 需要 知道 你 想 显示 的 项 。 修 改 代码 清单 6-4: 需要 添加 对 街道 、 城 市 、 州 和 邮编 


的 映射 。 我 们 会 等 到 你 完成 修改 。 


准备 好 了 吗 ? 


.Combo-name 
font-wei 
font=siz 
backgrou 

} 

.Combo-full-— 
font-siz 
Color: 


} 


这 段 CSS 代 码 为 模板 中 的 每 个 div 创建 了 一 个 类 。 现 在 需要 创建 一 个 新 的 模板 ， 让 列表 框 可 以 显 














在 创建 一 个 模板 之 前 ， 你 必须 创建 一 些 稍 后 会 用 得 着 的 CSS: 
{ 

ghts bolds 

E: L1GBX> 

nd-color: #FFFF99; 


address { 
站 
#666666; 











示 你 想 显 示 的 任何 


数据 。 





输入 以 下 代码 以 创建 组 合 框 : 


Var combo = 
fieldLab 
forceSel 
displayF 
loadingT 
pageSize 
width 
minChars 
valueFie 
triggeraA 
store 
listConf 

getI 


Ext .create('Ext.form.field.ComboBox', { 


el : 'Search by name', 
ection : true, 
ield : 'fullName', 
ext wv WOUGLY ind. ss 

;20 

320 

de 
1Q 5 
[ee 

: remoteJsonStore, 
ig 3 
nnerTel funcetion(t)y 斥 


return ' <div data-gqtip="{fullName}">' + 
'<div class="combo-name">{fullName}</div>' + 
'<div class="combo-full-address"> {street} </div>' + 
'<div class="combo-full-address">' + 
'{city} {state} {zip}</div>' + 
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Ae aly Se 


} 

D3) 

在 这 里 我 们 不 会 太 多 深入 探讨 XTemplate ， 因 为 我 们 在 第 2 章 已 经 讲 过 了 。 很 重要 的 一 点 是 要 
注意 ， 你 通过 覆盖 1istconfig 来 指定 getInnrTpl， 这 是 一 个 返回 字符 串 的 函数 。 这 个 
getInnerTp1 国 数 将 被 ListBox 类 调用 ， 而 字符 串 将 被 用 于 创建 一 个 XTemplate 实 例 。 

现在 可 以 对 所 做 改动 进行 检验 了 。 如 果 你 做 得 对 ， 结 果 应 该 与 图 6-9 展 示 的 内 容 类 似 。 











xX 


Search by name: Jo 4 





iJocelyn Good 
iPO, Box 555, 897 Facilisis Road 
;Pawtucket CA 14218 


01904 





Joelle Harris 
7420 Eu St. z 


Lock Haven WI 81400 台 


Page 1 of2 p> pl 
图 6-9 你 的 自 定义 组 合 杠 


自 定 义 组 合 框 的 方式 还 只 是 冰山 一 角 ! 因为 你 对 于 列表 框 如 何 泻 染 有 着 全 盘 的 控制 , 所 以 其 
至 可 以 在 列表 框 里 加 入 图 像 或 者 QuickTip( 快速 提示 )。 

本 节 介 绍 了 如 何 创 建 一 个 本 地 和 一 个 远程 的 组 合 框 , 阐述 了 ArrayStore 和 JsonStore 数 据 
存储 类 。 你 在 实现 的 远程 组 合 框 中 尝试 了 添加 分 页 功能 ， 结 构 了 组 合 框 ， 并 且 自 定义 了 列表 框 
现在 让 我 们 再 来 看 时 间 | 机 


6.3 ”时 间 输 入 框 


TimeField 也 是 一 个 便利 类 , 让 你 可 以 方便 地 往 表单 上 添加 一 个 时 间 选 择 输 入 框 。 为 了 构建 
一 个 一 般 时 间 输 入 框 ,你 可 以 创建 一 个 xtype 设 为 'timefield' 的 配置 对 象 ,并 将 获得 一 张 列表 ， 
上 面 的 可 选项 从 中 午 12:00 到 午夜 11:45。 以 下 是 实现 的 示例 : 


{ 














HH 














TH 














O 





xtype 让 
fieldLabel : 'Please select time', 
anchor ; “100%" 


} 


图 6-10 展 现 了 这 个 输入 框 会 如 何在 屏幕 上 渲染 。 时 间 输 入 框 是 可 配置 的 , 你 可 以 设置 时 间 范 
围 ， 间 隔 甚 至 是 格式 。 通 过 添加 以 下 属性 来 修改 时 间 输 入 框 ， 这 些 属性 可 以 让 你 使 用 军用 时 间 ， 
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设置 30 分 钟 的 时 间 增 量 间 隅 ， 以 及 把 时 间 选 择 范围 限定 在 上 午 9 点 到 下 午 6 点 : 








minValue : '09:00'， 


maxValue : '18:00°', 
increment : 30, 
format Hi 


A time field Example X 


Please select time: | > 
12:00 AM 
12:15 AM 
12:30 AM 
12:45 AM 
1:00 AM 


图 6-10 ”一般 时 间 输 入 机 


在 这 个 属性 列表 中 你 设置 了 minvalue 和 maxvalue 属 性 ， 它 们 给 时 间 输 入 框 限定 了 时 间 范 
围 。 你 还 把 increment 属 性 设 为 30, 把 格式 设 为 'H:i', 也 即 是 24 小 时 制 和 两 位 分 钟 数 。format 
属性 必须 要 能 通过 Date .parsetDate 方 法 的 校 验 。 如 果 有 意 使 用 一 种 自 定 义 格式 ， 请 查阅 完整 
的 API 文 档 。 
既然 你 已 经 看 到 了 如 何 使 用 组 合 框 和 时 间 输 入 框 ， 现 在 再 来 看 看 HTML 编辑 器 。 





Iml 























6.4 HTML 编辑 器 


Ext JS HTML 编辑 需 是 一 种 所 见 即 所 得 编辑 需 。 这 是 一 种 好 方法 , 让 用 户 可 以 输入 丰富 HITML 
格式 的 文本 ， 而 又 不 用 逼 着 他 们 掌握 HTIML 和 CSS。 它 可 以 让 你 配置 工具 栏 上 的 按钮 ， 以 防止 客 
户 进行 某 些 交互 操作 。 接 下 来 构建 第 一 个 HTML 编辑 器 。 






































6.4.1 构建 第 一 个 HTML 编 辑 器 
构建 一 般 的 HTML 编辑 器 很 简单 


var htmlEditor = { 

















xtype :htmLediton.; 
fieldLabel : 'Enter in any text', 
anchor O00 L100% 


} 


演 染 在 一 个 表单 上 的 HTML 编 辑 器 应 该 如 图 6-11 所 示 。 

我 们 讨论 了 HTML 编 辑 器 的 工具 栏 可 以 如 何 配 置 以 防止 显示 出 一 些 工具 。 只 要 把 
enable<someTool> 属 性 设置 为 false 就 可 以 轻松 实现 。 比如 说 , 如 果 想 禁用 “字体 大 小 ”和 “ 字 
体 选 择 ” 菜 单项 ， 你 可 以 把 一 下 属性 设 为 false: 




















6.5 ”选择 日 期 
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enableFontSize : 
: false 


enableFont 


false, 





出 工具 栏 
Enter in any text: 「Tahoma | BAU 太太 AAA- 罗 - | 匡 达 至 才 | 和 :三 区 
This is a WYSIWYG editor 


图 6-11 第 一 个 在 Ext JS 窗 口中 的 HTML 编 辑 器 


就 是 这 么 简单 。 做 出 这 些 改 动 后 ,请 刷新 页 面 。 你 再 也 不 会 看 到 改变 字体 大 小 的 文本 下 拉 框 
菜单 和 图 标 。 要 想 看 到 现 有 选项 的 完整 列表 ， 请 务必 查看 API 文 档 。HTML 编 辑 带 是 一 个 很 不 错 
的 工具 ， 不 过 和 很 多 东西 一 样 ， 它 也 有 一 些 局 限 性 。 


6.4.2 ”处 理 缺 少校 验 的 问题 


HTML 编辑 名 最 大 的 一 个 局 限 性 就 是 它 没有 基本 的 校 验 功 能 ， 无 法 把 输入 框 标示 为 输入 无 
效 。 在 使 用 该 输入 框 开发 表单 的 时 候 ， 你 必须 创建 自 定义 校 验方 法 : 一 个 简单 的 val idate 方 法 
应 该 如 下 所 示 : 






















































































Var htmlEditor = Ext.create('Ext.form.HtmlEditor', { 
fieldLabel : "Enter in any text", 


anchor : '100% 100%', 
allowBlank : false, 
validate : function () { 
var val = this.getValue(); 
return (this.allowBlank || val.length > 1); 


} 
}); 


虽然 当 消息 框 为 空 或 者 包含 一 个 简单 的 换行 元 素 时 validqate 方 法 会 返回 ftalse， 但 它 不 会 

把 该 输入 框 标示 为 “输入 无 效 ”。 我 们 将 在 本 童 稍 后 讨论 如 何在 表单 提交 以 前 检测 表单 的 输入 是 

否 有 效 。 现 在 ， 让 我 们 换个 话题 ， 去 看 看 日 期 输入 框 
选择 日 期 

日 期 输入 框 是 一 个 很 有 意思 的 小 表单 部 件 , 拥有 很 多 强大 的 UI 功 能 , 让 用 户 可 以 或 者 通过 输 

入 框 输入 日 期 ， 或 者 使 用 DatePicker 部 件 选择 日 期 。 让 我 们 来 构建 一 个 日 期 输入 框 : 


Var dateField = { 








Ba 





6.5 








xtype : 'datefield', 
fieldLabel : 'Please select a date', 
anchor ; "100%’ 
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月 份 导航 
x 
Please select a 
date; Feb 2009 ~ 
S M T W T F S 
和 
8 910 1 12 13 14 
DatePicker -一 人 15 16 17 18 20 21 
部 件 22 23 24 25 26 27 28 


ee i 
跳 转 到 今天 











图 6-12 ”DatePicker 部 件 ( 左 ) 间 








暴露 的 日 期 输入 栏 ， 

















是 的 ， 就 是 这 么 容易 。 图 6-12 展 现 了 日 期 输入 框 是 如 何 泻 染 的 


DatePicker 触 发 器 按钮 


Please select a 
date: 

















以 及 DatePicker 的 月 和 年 选择 工具 ( 右 ) 




















这 个 部 件 可 以 通过 配置 防止 某 些 日 期 被 选中 ， 具体 方 法 是 设 定 一 个 date 属 性 ， 该 属性 是 由 








与 format 


下 为 用 默认 格式 禁用 某 些 日 期 的 方法 : 





现在 你 已 经 熟悉 了 日 期 输入 框 ， 证 我 们 继续 来 探究 复 








属性 相 匹配 的 字符 串 组 成 的 一 个 数组 。format 属 性 默认 为 mdwy7， 或 者 01/01/2001。 以 


["01/16/2000"， "01/31/2009"] 禁用 这 两 个 日 期 
["01/16"] 禁用 每 一 年 的 这 个 日 期 
["01/../2009"] 禁用 2009 年 1 月 的 每 天 
LO] 禁用 每 一 个 一 月 


选 框 和 单 选 按钮 ， 学 习 如 何 使 用 


CheckboxGroup 和 RadioGroup 类 来 创建 输入 框 集合 。 


6.6” 复 选 框 和 单 选 按钮 














本 节 的 重点 不 仅仅 是 实例 化 复 选 框 和 单 选 按 钮 ,而 且 还 包括 如 何 把 它们 并 列 和 加 使 用 。 这 


些 知 识 将 帮助 你 开发 允许 复杂 数据 选择 的 表单 。 


ExtJS 复 选 输入 框 基 于 原版 的 HTML 复 选 输入 相 





匡 封 装 了 Ext JS 元 素 管 理 功 能 , 同时 包括 布局 控 








件 。 跟 使 用 HTML 复 选 框 一 样 ， 





你 可 以 指定 复 选 框 的 值 ， 





覆盖 默认 的 布尔 值 。 接 下 来 要 创建 一 些 


可 以 使 用 自 定义 值 的 复 选 框 ， 如 以 下 代码 清单 所 示 。 


代码 清单 6-5 ”构建 复 选 框 
var checkboxes = [ 


{ 


xtype : 'Checkbox', 
fieldLabel : 'Which do you own', 
boxLabel 2 at 


inputValue : 'cat' 


设置 复 选 框 


标签 文本 9 配置 默认 值 


6.6 复 选 框 和 单 选 按钮 123 





xtype : 'Checkbox', 
fieldLabel 1 
labelSeparator : 
boxLabel ‘DOG 
inputValue : 'dog'! 

a 

. 
xtype : 'Checkbox', 
fieldLabel Lo 
labelSeparator : 
boxLabel i 
inputValue : 'fish' 

于 

{ 
Xtype : 'Checkbox', 
fieldLabel A 
labelSeparator : 
boxLabel i a 
inputValue eo 


} 





| 

代码 清单 6-5 中 的 代码 构建 了 四 个 复 选 框 ， 你 覆盖 了 其 中 每 个 节点 的 默认 inputValue。 
boxLabel 属 性 @ 在 输入 框 右 侧 创 建 了 一 个 输入 框 标 签 ， 而 inputValue 属 性 @ 和 覆盖 了 默认 的 布 
尔 值 。 该 段 代码 泻 染 结果 的 一 个 示例 如 图 6-13 所 示 。 




















2 输入 框 标签 
Which do you own: [DD Cat = 各 号 
Dog 
口 Fish 
口 Bird 





图 6-13 ”第 一 个 四 复 选 


选 
虽然 这 种 方法 适用 于 很 多 表单 , 对 某 些 大 表单 来 说 这 是 对 屏幕 空间 的 浪费 。 在 下 面 的 代码 清 
单 中 ， 你 会 用 复 选 框 组 来 自动 排列 自己 的 复 选 框 。 


代码 清单 6-6 ”使 用 一 个 复 选 框 组 





Iiitl 

















var checkboxes = { 
xtype : 'Checkboxgroup', 
fieldLabel : 'Which do you own', 
anchor 1 LO00%.., 
items % 


{ 
boxLabel .Cat 
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inputValue : 'cat' 
二 
{ 
boxLabel pr OG Ey 
inputValue : 'dog' 
5 
{ 
boxLabel CA a 
inputValue : 'fish' 
把 
{ 
boxLabel Hi eo a 
inputValue : 'bird' 


] 
> 
以 这 种 方式 使 用 复 选 框 组 会 把 复 选 框 单独 排列 为 一 行 ， 就 像 图 6-14 中 显示 的 那样 。 要 设 定 列 
数 很 简单 ， 只 需 把 columns 属 性 设 为 想 要 的 列 数 。 








x N x 


口 Dog D Fish 口 Bird Which do you own: 口 cat 口 Dog 
口 Fish 口 Bird 


Which do you own: [DD cat 








图 6-14” 复 选 框 组 的 两 种 实现 方式 : 单 水 平 线 ( 左 ) 和 双 列 布局 ( 右 ) 


具体 使 用 哪 种 方式 实现 复 选 框 组 取决 于 你 的 需求 。 实 现 Radio 和 RadioGroup 类 的 方法 跟 使 
eR 的 方法 几乎 一 样 。 最 大 的 差别 在 于 可 以 给 单 选 按钮 赋予 同一 个 
名 字 ， 给 它们 分 组 ， 这 样 一 次 就 只 允许 选择 一 个 按钮 。 让 我 们 来 构建 一 个 单 选 按钮 群 ， 如 图 6-15 
所 示 。 











Which do you own: 全 cat 


上 


图 6-15 一 个 单列 的 单 选 按钮 


因为 RadioGroup 类 扩展 了 CheckboxGroup 类 , 所 以 它 的 实现 方式 是 一 样 的 ， 所 以 我 们 就 不 
重复 歼 述 了 。 我 们 已 经 探究 了 checkbox 和 Radio 类 及 其 相应 的 Group 类 ， 现 在 让 我 们 通过 更 深 
和信 地 探究 表单 面板 ， 来 把 它们 联系 在 一 起 。 你 将 学 习 如 何 实施 全 表单 检查 和 复杂 的 表单 布局 。 


6.7 表单 面板 
借助 于 Ext JS 表单 面板 ， 你 可 以 使 用 Ajax 提交 和 加 载 数据 ， 并 且 在 有 输入 字段 输入 无 效 时 向 
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用 户 提 供 实 时 反馈 。 为 FormPanel 是 Container 类 的 一 个 子 类 ， 所 以 可 以 轻易 地 添加 和 删除 
输入 字段 以 创建 一 个 真正 的 动态 表单 。 


文件 上 传 实际 并 非 Ajax 
在 大 多 数 浏览 器 中 , XMLHttpRequest 对 象 都 不 能 提交 文件 数据 ,为 了 让 数据 提交 效果 看 


似 Ajax，Ext JS 使 用 一 个 iFrame 来 提交 包含 文件 输入 元 素 的 表单 。 








一 个 额外 的 好 处 是 表单 面板 可 以 使 用 其 他 布局 或 者 组 件 ， 比 如 带 Card 布 局 的 标签 面板 , 来 创 
建 健壮 的 表单 ， 相 比 传统 布局 的 单 页 表单 ， 对 屏幕 空间 的 占用 大 大 减少 。 因 为 FormPanel 类 是 
Panel 类 的 子 类 ， 所 以 它 拥 有 Pane1 的 所 有 功能 ， 包 括 诸如 工具 栏 之 类 的 停靠 元 素 。 





6.7.1 检视 正在 构建 的 内 容 

和 其 他 container 子 类 一 样 ， FormPanel 可 以 利用 框架 提供 的 任意 布局 来 创建 布局 复杂 的 
表单 。 为 了 配合 分 组 输入 框 ， 表 单 面板 有 一 个 称 为 字段 集 的 “表亲 ”。 在 构建 组 件 以 前 ， 先 来 预 
览 一 下 所 要 实现 的 效果 ( 图 6-16 )。 











Our complex form 


Name Information Address Information 


First: Address: 
Middle: City: 
Last: State: Zip: 


Phone Numbers Resume Bio 
Home: 
Business: 

Mobile: 


Fax: 














图 6-16 ”预览 你 即将 构建 的 复杂 表单 面板 














要 构建 复杂 表单 ， 必 须 构建 两 个 字段 集 : 一 个 包含 名 称 信息 ， 男 一 个 包含 地 址 信息 。 除 了 字 
段 集 ， 你 还 要 设置 一 个 标签 面板 ， 其 中 可 以 包含 一 些 单行 文本 框 和 两 个 HTML 编 辑 器 。 为 了 完成 
这 项 任务 ， 你 要 用 到 目前 学 到 的 所 有 知识 ， 也 就 是 说 我 们 要 来 分 析 很 多 代码 。 



































6.7.2 ”构建 字段 集 
你 已 经 知道 要 构建 的 内 容 了 ,现在 先 来 构建 字段 集 ， 其 中 将 包含 名 称 信息 的 单行 文本 框 ， 如 
以 下 代码 清单 所 示 。 





126 第 6 章 ExtJS 中 的 表单 





代码 清单 6-7 构建 首 个 字段 集 


Var fieldsetl1 = { 


xtype : 'fieldset', 
title : 'Name', 把 xtype 设 为 'fieldset' 
flex Sk 
border : false, 
labelWidth : 60， 
defaultType : 'field', 
defaults wj 
anchor 0 


allowBlank : false 
La 
items : [ 
{ 
fieldLabel : 'First', 
name : 'firstName' 


fieldLabel : 'Middle', 


name : 'middle' 
i 
{ 
fieldLabel : 'Last', 
name : 'lastName' 


) ， 
在 构建 首 个 字段 集 XType@Q 时 ， 你 可 能 会 觉得 里 面 的 参数 看 起 来 像 是 面板 或 者 容器 的 参数 。 
这 是 因为 Fie14set 类 扩展 了 cont inez 美 并 为 折 释 方法 增加 了 一 些 功 能 ， 让 你 可 以 在 表单 中 
包含 输入 框 。 在 这 个 例子 里 之 所 以 使 用 字段 集 , 是 因为 它 可 以 在 最 项 端 增 加 一 个 小 标题 ,你 通过 
这 种 方式 接触 到 这 个 组 件 。 
暂时 跳 过 对 这 首 个 字段 集 的 泻 染 , 因为 稍 后 你 要 在 表单 面板 里 用 到 它 。 让 我 们 继续 构建 第 二 
个 字段 集 ， 其 中 将 包含 地 址 信息 。 以 下 代码 清 单 代 码 量 很 大 ， 所 以 请 耐心 看 完 。 


代码 清单 6-8 构建 第 二 个 字段 集 















































Var fieldset2 = Ext.apply({}, { 

2 人 6 从 第 一 个 字段 集 复 
labelWidth : 30, 制 属性 
title : 'Address Information', 
defaults 六 

layeout 1GGTLUina7 

anchor : '100%' 
i 
items 和 

{ 

fieldLabel : 'Address', 


name : 'address'! 
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fieldLabel : 'Street', 
name : 'street' 
hs 
{ 9 添加 列 布局 容器 
xtype : 'container', 
items : [ 
《 
xtype : 'fieldcontainer', 
STONE 全 全 水 添加 输入 框 容器 
items 243 
{ 
xtype textfieldr, 
fieldLabel : 'State', a 配置 州 单 
name ; : 'Sstate', 行文 本 框 
labelWwidth : 100, 
width pa A 0) 
} 
] 
和 
9 添加 输入 
xtype : 'fieldcontainer', 框 容器 
columnWidth : .5， 
items 2 ,i[ 
{ 
xtype : 'textfield', 
ee ee 0 设置 邮政 编码 单行 
labelWidth : 30, 文本 杠 
width i 162 


} 

Es ee 

在 代码 清单 6-8 中 ， 你 使 用 Ext .apply@ 方 法 ,把 fieldset1 中 的 很 多 属性 ， 复 制 到 
fieldqset2 中 。 这 个 工具 方法 被 普遍 用 来 复制 或 者 覆盖 一 个 对 象 或 者 另 一 个 对 象 的 属性 。 我 们 将 
在 探讨 Ext JS 工 具 带 的 时 候 更 多 地 讨论 这 个 方法 。 要 想得到 期 望 的 布局 ， 并 让 州 文本 输入 框 和 邮 
政 编码 文本 输入 框 并 排 ， 你 就 必须 借助 于 大 量 垦 套 。 第 二 个 字段 集 的 子 项 @ 是 一 个 容器 ， 它 的 
layout 属 性 被 设 为 'column'。 该 容器 的 第 一 个 子 元 素 是 一 个 fieldcontainer 全 , 其 中 包含 了 
州 单行 文本 框 @@。columnLayout 容 器 的 第 二 个 子 项 @ 是 男 一 个 fieldcontainer， 其 中 包含 了 
邮政 编码 单行 文本 框 @。 

你 可 能 在 疑惑 为 什么 有 这 么 多 艇 套 的 容 需 , 以 及 为 什么 实现 的 代码 会 这 么 长 。 要 想 在 其 他 布 
局 内 使 用 不 同 的 布局 ， 容 器 租 套 是 必要 的 。 这 个 道理 你 可 能 不 会 马上 想 明 白 ， 相 信 你 在 泻 染 表单 
的 时 候 会 更 加 明了 。 现 在 ， 还 是 让 我 们 继续 来 为 这 两 个 字段 集 构建 一 个 存在 场所 。 

为 了 让 表单 能 够 并 排 显 示 ， 你 需要 为 它 创建 一 个 容器 ， 并 将 其 设 为 使 用 HBox 布 局 。 为 了 让 
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HBox 布 局 中 的 宽度 相等 ,你 必须 把 每 个 字段 集 的 stret ch 属性 都 设 为 1。 让 我 们 来 为 两 个 字段 集 
打造 一 个 “ 


var fieldsetContainer = { 
xtype : 'Container', 
layout vy "hbox.s 
layoutConfig : { 
align : 'stretch' 
7 
Items sll 
fieldsetl1, 
fieldset2 


a 


这 段 代 码 创建 了 一 个 容器 , 它 的 高 度 是 固定 的 , 但 却 没有 设置 宽度 。 这 是 因为 这 个 容器 的 宽 
会 通过 VBox 布 局 自动 设置 ， 它 是 你 未 来 创建 的 表单 面板 所 用 的 布局 。 





















































度 将 
6.7.3 ”创建 标签 面板 


接 下 来 要 构建 一 个 标签 面板 ， 带 三 个 选项 卡 ， 一 个 包含 电话 号 码 表单 元 素 ， 另 外 两 个 包含 
HTML 编 辑 器 。 这 个 标签 面板 将 使 用 表单 面板 可 用 高 度 的 下 半 部 分 。 你 将 一 次 性 地 配置 所 有 选项 
卡 ， 所 以 下 面 这 个 代码 清单 很 长 。 


代码 清单 6-9 ”构建 一 个 带 表 单元 素 的 标签 面板 


























var tabs = [ 
{ 
xtype : 'fieldcontainer', 
title : 'Phone Numbers', wo 为 单行 文本 框 添 
layout 六 加 容器 
bodyStyle : 'padding:6px 6px 0'， 
defaults : { 
XtyBe. 2 "Lextfieéldr,; 
width : 230 
} 
items: [ 
{ 
fieldLabel : 'Home'， 
name : 'home' 
je 
{ 
fieldLabel : 'Business', 
name : 'business' 
> 
{ 
fieldLabel : 'Mobile', 
name : 'mobile' 


fieldLabel : 'Fax', 
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name fax 
} 

] 
3 
{ 

title : 'Resume', 

xtype : 'htmleditor', 

name : “TeSume = 添加 两 个 HTML 编 辑 
- 器 作为 选项 卡 

title i Bio"; 

xtype : 'htmleditor', 

name : 'bio' 


} 
3 
代码 清单 6-9 构 建 了 一 个 数组 ， 由 三 个 选项 卡 组 成 ， 它 们 将 是 未 来 标签 面板 的 子 元 素 。 第 一 
个 选项 卡 @ 是 一 个 有 4 个 单行 文本 框 的 fieldcontainer。 第 二 个 @ 和 第 三 个 选项 卡 是 HTML 编 
辑 器 ， 它 们 将 被 用 来 输入 一 篇 摘要 和 一 篇 短 传记 。 让 我 们 继续 来 构建 标签 面板 : 


























Var tabpanel = { 
xtype : 'tabpanel', 
activeTab :> 0 
deferredRender : false, 
layoutOnTabChange : true, 
border : false, 
flex co 
plain : true, 
items : tabs 


} 
下 个 代码 清单 中 的 任务 是 构建 表单 面板 本 身 , 而 相 比较 构建 它 所 有 的 子 项 ,这 一 步 要 相对 琐碎 : 


代码 清单 6-10 ”整合 





Var myFormPanel = Ext.create('Ext.form.Panel', { 
renderTo : Ext.getBody(), 
width 70.0.> 
title : 'Our complex form', 
frame 二 DY 
id : 'myFormPanel', 
layout oop 
layoutConfig : { 

align : 'stretch' 
} 
items 红 站 
fieldsetContainer, 
tabPanel 


] 
}); 


终于 可 以 创建 表单 面板 了 。 设 置 renderTo 以 确保 表单 面板 能 被 自动 泻 染 。 为 了 妥善 设置 
fieldsetCcontainer 和 标签 面板 的 尺寸 , 要 使 用 VBox 布 局 , 并 把 layconfig 的 align 属 性 设 为 
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'stretch'。 通 过 图 6-17 观 察 这 个 非常 复杂 的 表单 是 如 何 演 染 的 。 

















输入 框 布局 fieldsetl 输入 框 布局 fieldset2 
[ 1] 
一 列 布局 容器 
列 布局 字 
段 集 容器 输入 框 布 
癌 局 容器 











图 6-17 ”你 的 第 一 个 复杂 布局 表单 的 泻 染 结果 ， 表 单 借助 不 同 的 容器 组 合 出 了 复杂 的 布局 


在 图 6-17 中 ， 我 们 把 构成 表单 前 半 部 分 的 不 同 容 器 设 为 高 亮 ， 其 中 包括 fieldset 
container， 两 个 字段 集 和 它们 的 子 组 件 。 通 过 使 用 这 么 多 容器 ， 你 可 以 确保 全 盘 控 制 UI 的 布 
局 方式 。 用 这 些 长 段 的 代码 来 创建 一 个 如 此 复杂 程度 的 UI 是 很 常见 的 。 在 试用 新 创建 的 表单 面板 
的 时 候 ， 你 可 以 在 三 个 选项 卡 之 间 切 换 ， 点 出 隐藏 在 下 面 的 HTML 编 辑 咒 。 

到 现在 , 你 已 经 看 到 如 何 通 过 组 合 多 个 组 件 和 布局 得 到 既 好 用 又 节省 空间 的 UI。 接 下 来 , 让 
我 们 集中 学 习 如 何 使 用 表单 提交 和 加 载 数 据 ， 否 则 表单 将 毫 无 用 处 。 


6.8 数据 提交 和 加 载 


通过 基本 表单 提交 方法 来 提交 数据 是 新 开发 者 最 经 常 碰壁 的 领域 之 一 。 这 是 因为 很 多 年 以 
来 ,我 们 已 经 习惯 了 在 提交 表单 后 期 待 页 面 刷 新 。 而 使 用 Ext JS ， 表 单 提交 需要 一 些 技 巧 。 同 样 ， 
用 数据 加 载 一 个 表单 对 有 些 人 来 说 可 能 有 点 和 弄 不 懂 ， 所 以 我 们 要 探索 几 种 可 能 的 实现 方式 。 
6.8.1 提交 表单 的 传统 方式 

提交 表单 的 传统 方法 是 非常 简单 ， 不 过 需要 配置 表单 面板 的 底层 表单 元 素 ， 把 standarada- 
Submit 属 性 设 为 true。 为 了 执行 提交 动作 ， 调 用 : 

Ext .getCmp('myFormPanel') .getEorm() .submit () ， 

这 段 代 码 会 调用 一 般 的 DOM 表 单 submit 方 法 ， 它 会 用 传统 方式 提交 表单 。 如 果 要 在 表单 面 
板 中 用 这 种 方法 , 我 们 建议 通过 Ajax 检查 表单 提交 ,这 可 以 让 你 看 到 一 些 在 使 用 传统 表单 提交 方 
法 时 无 法 使 用 的 功能 。 
































































































































6.8.2 ”通过 Ajax 提交 数据 


要 提交 一 个 表单 ， 必 须 访问 表单 面板 的 BasicForm 组 件 ， 为 此 使 用 访问 方法 getForm 或 者 
formPpanel .getForm()。 这 样 , 就 可 以 访问 到 BasicForm 的 submit 方 法 ， 你 将 用 它 来 通过 Ajax 
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发 送 数据 。 代 码 如 以 下 代码 清单 所 示 。 
代码 清单 6-11 ”提交 表单 


Var onSuccessOrFail = function(form, action) { 
Var formPanel = Ext.getCmp('myFormPanel'); 
formpanel .el .unmask(); 显示 JSON 了 驱动 
Var result = action.result; 的 信息 
if (result.success) { 


Ext .MessageBox.alert('Success',action.result.msg); 
小 
else { 

Ext .MessageBox.alert ('Failure',action.result.msg); 


} 


var submitHandler = function() { 
Var formPanel = Ext.getCmp('myFormPanel'); 
formPpanel.el.mask('Please wait', 'x-mask-loading'); 


formPpanel .getForm() .submit({ 
url : 'Success.true.txt', 0 执行 表单 提交 


success : onSuccessOrFail, 
failure : onSuccessOrFail 
}); 
}; 
在 代码 清单 6-11 里 ， 创 建 了 一 个 叫 onsuccessorFail 的 成 功 和 失败 处 理 程序 ， 如 果 表 单 提 
交 的 尝试 成 功 或 失败 就 将 调用 该 处 理 程序 。 它 会 根据 从 网 页 服务 器 返回 的 JSON 状 态 显 示 一 个 警 
告 消息 框 @。 然 后 创建 提交 处 理 程序 方法 submitHandler， 它 执行 表单 提交 动作 @。 你 可 以 在 
BasicForm 或 者 表单 面板 这 一 层级 指定 URL, 但 之 所 以 这 里 在 调用 提交 的 时 候 指定 , 是 因为 我 们 
希望 特别 指出 ,目标 URL 可 以 在 运行 时 间 更 改 。 另 外 ， 如 果 你 想像 这 里 一 样 ， 提 供 任 何 类 型 的 等 
待 消息 ， 就 应 该 有 成 功 和 失败 处 理 程序 。 
最 起 码 , 返回 的 JSON 应 该 包含 一 个 值 为 Lrue 的 'success' 布 尔 值 变量 。 成 功 处 理 程序 预计 
还 有 一 个 msg 属 性 ， 其 中 应 该 包含 一 个 字符 串 ， 把 一 条 消息 返回 给 用 户 : 
{success: true, msg : 'Thank you for your submission.'} 
同样 ， 如 果 服 务 器 端 代码 认为 这 次 提交 出 于 任何 原因 没有 成 功 ， 服 务 器 应 该 返回 一 个 success 
属性 设 为 false 的 JSON 对 象 。 
如 果 想 执行 服务 顺 端 校 验 〈 可 能 会 报错 )， 那 么 返回 的 JSON 也 可 能 包括 一 个 errors 对 象 。 
下 面 是 一 个 附 有 errors 对 象 的 失败 信息 示例 : 


{ 















































success : false, 


msg : 'This is an example error message', 
errors : { 
firstName : 'Cannot contain "!" characters.', 
lastName : 'Must not be blank.' 
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如 果 返 回 的 JSON 包 含 一 个 eorrs 对 象 ， 那 么 通过 该 名 称 识别 的 所 有 输入 框 都 会 被 标示 为 无 
效 。 图 6-18 展 现 了 服务 器 端 提供 JSON 代 码 的 表单 。 





Ourcomplex form 











Name Information Address Information 

Frst [Invalidl ls) Address 

Middle: 

Last: Zip: 











Phone Numbers Resume Bio 
Home: 
Business: 
Mobile: 


Fax: 


Submit load 








图 6-18 ”服务 器 端 errors 对 象 使 用 标准 的 QuickTip 报 错 msg 后 的 运行 结果 


本 节 中 , 你 知道 了 如 何 使 用 标准 提交 方法 以 及 Ajax 方 法 提交 表单 , 还 看 到 了 如 何 使 用 errors 
对 象 ， 借 助 于 UI 层 级 的 报错 提示 ， 提 供 服务 器 端 校 验 。 接 下 来 ,我们 要 学 习 如 何 使 用 load 和 
setValues 方 法 把 数据 加 载 到 表单 中 。 


6.8.3 ”把 数据 加 载 到 表单 中 


几乎 所 有 表单 的 使 用 周期 都 包含 保存 和 加 载 数 据 。 在 Ext JS 中 ， 有 几 种 方法 可 以 加 载 数 据 ， 
但 必须 有 数据 可 以 加 载 ， 所 以 首先 要 创建 一 些 数据 。 让 我 们 创建 一 些 虚拟 数据 ， 并 将 其 保存 在 一 
个 名 为 data.json 的 文件 里 : 


{ 








"success" : true, 

aa 
"firstName" : "Jack", 
"lastName" : "Slocum", 
"middle" pe 
"address" "1 Ext JS Corporate Way", 
Veity, ; “OFlando", 
"state" : "Florida", 
于 2 十 介 于 2280 
"home" 5 02 
"Dusiness wv "T832932 .3828" 


"mobile" T2333 2122> 
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We dd 92 DD 9 

"resume" : "Skills:<br><ul><1li>Java Developer</1i><1i>Ext JS 
Senior Core developer</1i></ul>", 

"iG : "&nbsp;Jack is a stand-up kind of guy.<br>" 


} 
} 


和 使 用 表单 提交 一 样 ， 根 JSON 对 象 必须 包含 一 个 值 为 Lrue 的 success 属 性 ， 它 将 触发 
setValues 方 法 调用 。 另 外 ， 用 于 加 载 到 表单 上 的 值 必须 要 在 一 个 引用 属性 为 aata 的 对 象 里 。 
同样 , 让 你 的 表单 元 素 名 称 和 要 加 载 的 数据 属性 相对 应 是 一 个 好 方法 。 这 样 可 以 确保 相应 的 输入 
框 中 填 人 正确 的 数据 。 要 让 表单 通过 Ajax 加 载 数据 ， 可 以 调用 BasicForm 的 10ad 方 法 ， 其 语法 
跟 supmit 方 法 类 似 : 


Var formPanel = Ext.getCmp('myFormPanel');} 





PT 























formPpanel.el.mask('Please wait', 'x-mask-loading'); 
formPpanel.getForm().load({ 
url » "data, JjSoOn™; 


success : function() { 
formPpanel.el.unmask (); GE 
4 

和 

运行 这 段 代 码 将 导致 表单 面板 执行 一 次 Ajax 请 求 来 取得 数据 ， 而 最 终 表 单 中 将 填 入 相应 的 


值 ， 如 图 6-19 所 示 。 


Our complex form 
Name Information Address Information 
First: Jack Address: 1 Ext JS Corporate Way 
Middle: City: Orlando 
Last: Slocum State: Florida Zip: 32801 
Phone Numbers | Resume | Bio 
| Tahoma :| |BZTrIUIAAIA | 芽 | 于 所 | 仿 二 | 浅 | 区 


Skills: 


。 Java Developer 
。 Ext ]S Senior Core developer 


Submit load 


图 6-19 ”通过 Ajax 加 载 数据 的 结果 
如 果 你 手头 有 数据 ， 例 如 从 另 一 个 诸如 数据 网 格 的 组 件 那 里 得 到 的 ， 那 么 可 以 通过 


myFormPanel .getForm() .setValues (dataObj) 来 设置 值 。 使 用 这 个 方法 ， aqataobj 将 会 只 
包含 对 元 素 名 称 的 正确 映射 结果 。 同 样 ， 如 果 你 有 一 个 Ext .data.Record 的 实例 ， 则 可 以 用 表 
单 的 1oadRecorda 方 法 来 设置 表单 的 各 项 值 。 
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提示 要 从 任何 特定 的 表单 取得 值 ， 就 调用 FormPanel 实 例 的 getValues 方 法 。 举 例 来 说 ， 
myFormpanel.getValues () 会 返回 一 个 对 象 ， 里 面包 含 的 键 代表 着 输入 框 的 名 称 和 它 
们 的 值 。 











加 载 数据 可 以 如 此 简单 。 请 记 住 ， 如 果 服 务 需 端 想 拒绝 数据 加 载 , 那么 可 以 把 success 值 设 
为 false， 这 会 触发 在 加 载 的 配置 对 象 中 引用 的 failure 方 法 。 
祝贺 你 ! 你 已 经 配置 了 第 一 个 真正 复杂 的 表单 面板 ， 并 学 会 了 加 载 和 保存 它 的 数据 。 











6.9 小 结 


对 FormPane1 进 行 的 集中 讨论 涉及 了 很 多 主题 , 包括 很 多 常用 的 字段 。 你 甚至 有 机 会 深入 了 
解 了 组 合 框 ， 并 在 此 过 程 中 首次 接触 到 了 它 的 辅助 类 aatastore 和 DatavView。 借 此 ， 你 知道 了 
如 何 自 定义 组 合 框 生成 的 列表 框 。 此 外 ,你 还 构建 了 一 个 相对 复杂 的 布局 表单 ， 并 使 用 新 工具 提 
交 和 加 载 了 数据 。 

在 此 之 后 ,我 们 将 深入 探讨 数据 网 格 面板 。 你 将 了 解 它 的 内 部 组 件 ， 知 道 如 何 自 定义 一 个 网 
格 的 观感 。 你 还 将 学 会 使 用 网 格 面板 的 编辑 器 插件 ， 以 便 直 接 编辑 数据 。 在 此 过 程 中 ， 你 还 将 了 
解 更 多 关于 数据 存储 的 知识 。 请 准备 好 享受 这 次 有 趣 的 旅行 吧 。 



































数据 存储 








本 章 内 容 

口 使 用 数据 存储 

口 了 解数 据 代理 

口 探究 写 和 人 顺和 校 验 





要 创建 一 个 实际 应 用 ， 需 要 有 一 种 持久 存储 数据 的 方法 。 数 据 持久 化 让 应 用 的 用 户 可 以 在 
不 同 会 话 之 间 访 问 数据 ， 所 以 数据 应 该 储存 在 一 种 媒介 中 ， 在 应 用 被 停止 和 重新 启动 后 仍 以 被 
访问 。 

如 果 编 写 的 是 简单 应 用 , 就 可 以 利用 Ajax 技 术 通 过 屏幕 上 的 组 件 更 新 和 检索 数据 ， 以 此 实现 
数据 持久 化 。 但 如 果 创 建 的 是 涉及 客户 端的 高 阶 交 互 逻辑 的 Ext JS 应 用 , 那么 可 以 使 用 Ext JS 数 据 
存储 中 的 可 用 功能 。 

本 章 首先 带 我 们 大 体 了 解数 据 包 。 你 将 了 解 Ext .data.store 和 它 的 支持 类 ， 包 括 
Ext .data.Model， 以 及 数据 是 如 何 流动 又 是 如 何 被 数据 存储 使 用 的 。 此 外 , 我 们 将 讨论 不 同 的 
数据 读 取 器 ， 并 通过 数组 、JSON 和 XML 数据 来 探索 数据 使 用 。 

你 将 熟悉 所 有 的 数据 代理 ， 学 会 从 常 驻 内 存 、Ajax、JSONP 和 LocalStorage 中 读 取 数据 。 在 
本 章 的 结尾 ， 我 们 将 通过 演示 如 何 处 理 数 据 校 验 和 关联 来 介绍 Ext JS 4 数据 包 的 高 阶 特性 。 

通读 本 章 ， 你 将 拥有 充足 的 知识 与 自信 使 用 Ext JS 框架 创建 任意 数据 驱动 的 视图 ， 首 先 就 是 
第 8 章 的 网 格 面板 。 


7.1 介绍 数据 存储 


Ext .date.Store 的 用 途 是 提供 一 个 基础 ， 可 以 存储 服务 器 上 数据 的 一 个 本 地 子 集 ， 并 在 将 
数据 发 回 服务 右 之 前 跟踪 这 一 数据 的 变化 ( 如 果 应 用 允许 编辑 数据 的 话 )。 

数据 存储 在 框架 中 任何 需要 的 地 方 为 很 多 部 件 供 给 数据 。 为 了 更 直观 地 加 以 描述 ， 图 7-1 列 
举 了 依赖 aatastore 类 的 类 。 
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到 表 数据 视 医 
组 合 框 ~ 数据 存储 
网 格 面板 树 形 面板 




















图 7-1 ”数据 存储 和 它 供给 数据 的 类 。 这 张 图 并 没有 展示 类 继承 关系 


可 以 看 到 , 数据 存储 支持 很 多 种 部 件 , 包括 数据 视图 、 组 合 杠 、 图 表 、 网 格 面板 和 树 形 面 板 。 
数据 存储 还 是 树 形 面板 的 基础 (我们 将 在 第 10 章 介绍 树 存储 )。 

data Store 类 在 Ext JS 框 架 和 应 用 中 扮演 着 不 可 或 缺 的 角色 ， 所 以 当然 很 有 必要 来 详细 介 
绍 这 个 类 。 正 因为 此 我 们 要 用 接 下 来 的 这 几 页 来 讨论 data Store 类 ， 以 及 使 用 运用 ， 然 后 再 去 
尝试 一 些 代 码 。 


7.1.1 支持 类 


经 常用 数据 存储 来 读 取 数据 ， 这 也 很 合理 ;gata store 类 类 似 于 一 个 接口 类 。 数 据 存储 本 
身 负责 组 织 列 举 数据 , 但 它 主要 是 管理 其 他 类 。 这 些 其 他 类 支持 数据 存储 ,帮助 它 为 视图 提供 数 
据 以 泻 染 在 屏幕 上 。 

为 了 理解 支持 数据 存储 的 类 ， 让 我 们 先 退 一 步 ， 来 看 看 一 张 数 据 包 的 简化 视图 。 图 7-2 显 示 
出 aata Store 类 与 很 多 类 有 联系 。 每 个 类 在 框架 对 数据 的 使 用 中 起 到 相应 的 作用 。 表 7-1 给 出 了 


这 些 类 的 用 途 。 









































图 7-2 ”数据 包 一 览 
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表 7-1 Data Store 及 其 支持 类 























类 用 途 
Store 通常 用 于 读 取 和 保存 数据 的 接口 类 
Sorter 负责 给 数据 排序 
Filter 管理 数据 过 滤 
Grouper 用 来 对 数据 分 组 
Proxy 管理 数据 被 输入 数据 存储 的 典型 方式 
Reader 用 来 转化 入 站 的 数据 , 以 便 供给 Model 的 实例 
Writer 负责 组 织 列举 数据 以 便 给 发 往 数 据 存 储 进行 存储 
Model 代表 对 应 一 个 特定 数据 存储 的 独立 数据 行 
Association 允许 模型 通过 预 配置 的 规则 彼此 之 间 关 联 
Validation 防止 模型 被 不 正确 或 者 不 完整 的 数据 破坏 的 一 种 方法 











框架 为 数据 存储 提供 了 大 量 支 持 。 这 些 类 的 设计 目的 是 为 了 让 你 的 工作 更 轻松 , 帮助 应 用 在 
浏览 器 中 方便 地 管理 健壮 的 数据 。 

对 于 数据 存储 是 如 何 使 用 支持 类 的 ， 你 现在 已 经 略 知 一 二 。 知 道 数 据 是 如 何 流 动 的 ,这 在 开 
始 使 用 数据 存储 的 时 候 将 会 很 有 帮助 。 


7.1.2 ”数据 是 如 何 流动 的 


让 我 们 来 看 看 数据 是 如 何 从 一 个 来 源流 动 到 数据 存储 的 。 我 们 首先 来 看 一 个 基本 的 流动 , 如 
图 7-3 所 示 。 

































































图 7-3 ”从 一 个 数据 源 到 数据 存储 使 用 者 的 数据 流动 


可 以 看 到 , 数据 总 是 源 自 一 个 数据 源 ， 而 数据 的 读 取 和 保存 是 由 一 个 数据 代理 管理 的 。 数 据 
Proxy 类 简化 了 从 众多 来 源 对 未 格式 化 数据 对 象 的 获取 ， 并 借助 于 诸如 数据 Reader 这 样 的 定制 
类 包含 它们 自己 用 于 彼此 通信 的 事件 模型 。 

比如 说 ,在 一 个 与 数据 使 用 者 ( 比如 网 格 面板 ) 绑 定 的 数据 存储 中 改变 一 个 模型 的 值 ， 将 导 
致 UI 在 该 模型 被 执行 的 时 候 更 新 。 在 模型 被 加 载 到 数据 存储 后 , 绑 定 的 数据 使 用 者 会 刷新 它 的 试 
图 ， 读 取 周 期 完成 。 

特定 的 data Store 子 类 将 会 拥有 load、remove 和 sync 操 作 。1load 和 remove 操 作 人 处 理 数 
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据 存储 里 的 本 地 模型 列表 ， 而 sync 操 作 通 过 选 定 的 代理 把 数据 存储 的 本 地 内 容 和 数据 端点 同步 。 


刚刚 已 经 看 到 ， 数 据 代理 对 于 数据 存储 的 操作 至 关 重 要 。 让 我 们 深入 了 解 什么 是 数据 代理 ， 








以 及 有 哪些 种 类 的 代理 可 供 使 用 。 
7.1.3 ”关于 数据 代理 


在 框架 中 有 一 个 命名 很 恰当 的 抽象 类 Ext .data.proxy .Proxy， 它 是 多 个 子 类 的 基 类 , 负 
责 从 特定 的 来 源 获取 数据 并 对 其 写 和 数据， 如 图 7-4 所 示 。 


(data) Proxy 


图 7-4 “数据 代理 











Ajax 一 一 Rest | 


[下 Direct 
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一 Client a Webstorage |= 
Eq Memory 

















和 它 的 7 种 特定 实现 方式 ， 每 一 种 都 负责 从 一 个 特定 的 数据 源 获取 数据 


这 么 多 不 同 的 代理 刚 开 始 可 能 让 你 有 点 儿 眼 花 练 乱 。 如 果 你 是 从 Ext JS 3 过 渡 来 的 ， 那 这 看 
起 来 简直 像 是 数据 包 大 爆炸 ! 可 当 你 发 现 Server、Client 和 WebStorage 代 理 是 基 类 ， 只 有 剩 下 的 7 
个 类 可 以 实际 使 用 的 时 候 ， 就 可 以 放松 下 来 了 。 在 这 里 我 们 将 逐个 地 详细 探讨 这 7 个 类 、 





最 常用 的 代理 





是 Ajax 代理 























， 它 使 用 浏览 器 的 XHR 对 象 来 执行 一 般 Ajax 请 求 。Ajax 代 理 被 限制 





在 同一 个 域内 ， 因 为 所 谓 的 同 源 策 略 。 该 策略 决定 了 通过 XHR 提 交 的 XHR 请 求 不 能 在 一 个 特定 


页 面 加 载 的 域 以 外 执行 。 这 一 策略 的 目的 是 为 了 加 强 使 用 XHR 的 安全 性 , 但 被 普遍 认为 与 其 说 是 





























个 安全 措施 ， 还 不 如 说 是 个 麻烦 东西 。Ext JS 开发 人 员 很 快 就 为 这 项 “特性 ”开发 了 一 个 解决 办 
法 ， 这 时 JsonP 代 理 登 场 了 。 

JsonP 代 理 聪 明 地 使 用 脚本 标签 从 另 一 个 域 获取 数据 ， 它 的 效果 很 好 ， 但 需要 提出 请 求 的 域 
返回 JavaScript 代 码 而 不 是 一 般 的 数据 片段 。 了 解 这 一 点 很 重要 , 因为 不 能 对 任何 第 三 方 网 站 使 用 
JsonP 代 理 来 获取 数据 。Json 代 理 需 要 把 返回 的 数据 封装 在 一 个 全 局 方法 调用 中 , 把 数据 作为 唯一 
参数 传人 。 稍 后 你 将 进一步 学 习 JsonP 代 理 ， 因 为 将 用 它 配合 extjsinaction.com 上 多 种 不 同 的 API 
从 我 们 的 示例 中 获取 数据 。 

MemoryProxy 类 让 Ext JS 可 以 从 一 个 内 存 对 象 中 读 取 数 据 。 虽 然 可 以 通过 一 个 data store 
实例 的 loagData 方 法 把 数据 直接 读 取 到 该 实例 ， 但 使 用 MemoryProxy 类 在 某 些 情况 下 很 有 帮 









































助 。 示例 之 一 就 是 重新 读 取 数据 存储 的 任务 。 如 果 使 用 store .1oadpata, 就 需要 传人 该 数据 的 
引用 , 后 者 由 读 取 器 解析 ， 并 被 读 入 数据 存储 。 使 用 内 存 代理 可 以 让 事情 更 简单 ， 因 为 只 需要 调 


用 store.reload 方 法 ， 并 让 Ext JS 来 处 理 蔡 差 事 。 

















Direct 代 理 使 得 数据 存储 可 以 与 Ext .direct 远 程 调用 提供 者 交互 ， 从 而 允许 通过 远程 方法 
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调用 (RPC ) 来 获取 数据 。 


注意 如 果 你 有 兴趣 更 深入 地 了 解 Ext .Direct, 大 可 以 先 看 一 下 第 11 章 ,不 过 看 过 后 马上 回来 。 
我 们 将 在 这 里 介绍 很 多 你 理解 第 11 章 需要 的 基础 知识 。 























RestProxy 是 AjaxProxy 的 子 类 , 专门 用 于 跟 Rest 式 资源 交谈 。 比 如 说 , 如 果 想 获取 ID 为 403 
的 员工 资料 ，Rest 代 理会 自动 发 送 一 个 GET 请 求 到 /employee/403。 这 一 自动 URL 创 建 在 一 个 已 经 
使 用 这 一 系统 的 环境 中 会 很 方便 。 

当 应 用 离线 或 者 当 你 不 希望 与 服务 器 交谈 的 时 候 ， 可 以 选择 使 用 LocalStorage 代 理 或 者 
SessionStorage 代 理 来 存储 数据 。 这 些 客户 端 代理 通过 HTML5 Web 存 储 API 采 用 现 有 的 “ 键 / 值 ” 
机 制 来 持续 保存 数据 ， 所 以 相关 的 数据 结构 将 被 自动 序列 化 为 JSON。 如 果 浏 览 器 上 不 具备 
HTML5 网 页 存储 API， 那 代理 会 弹出 一 个 异常 。 如 果 想 在 会 话 之 间 持 续 保 存 数据 ， 就 使 用 
LocalStorage 代 理 ; 如 果 只 想 在 浏览 器 会 话 激 活 的 时 候 保 存 数据 ， 那 就 使 用 SessionStorage。 











注意 请 记 住 ， 需要 给 每 个 WebStoage 代 理 提供 唯一 的 ID。 

















所 有 代理 都 实现 了 相同 的 接口 ,理论 上 应 该 是 可 以 互 换 的 .不 过 有 几 点 要 注意 。 因 为 JavaScript 
的 限制 , 在 用 JsonP 代 理 进 行 写 人 时 所 有 参数 都 是 用 GET 方 法 传人 。 这 并 非 不 合理 , 但 如 果 选 择 
换 用 JsonP 代 理 , 那么 在 不 得 不 重新 实现 初始 使 用 Ajax 代理 的 后 台 程序 时 , 这 可 能 会 带 来 “惊喜 ”。 
另外 也 应 该 很 显然 的 一 点 是 ， 在 从 Ajax 代理 转 用 LocalStorage 代 理 时 ， 没 有 理由 保留 一 个 url 
设置 。 


7.1.4 “模型 和 读 取 器 


数据 存储 的 基础 是 Ext.daata.Model 。 它 把 数据 保留 在 一 个 字段 列表 中 ， 并 用 
Ext .data.Association 描 述 与 其 他 模型 的 关联 , 而 且 它 允许 使 用 Ext .data.validations 来 
校 验 。 可 以 使 用 Ext .data .Reader 把 数据 读 入 数据 集 , 并 用 Ext .data .writer 把 数据 写 回 到 服 
务 絮 。 

如 果 你 熟悉 SQL 数据 库 , 那 可 能 会 注意 到 Ext .data .Model 跟 一 个 SQL 数 据 库 中 的 表格 有 些 
类 似 。 每 次 实例 化 一 个 特定 的 Ext JS 数 据 模型 ， 可 以 说 都 是 在 模拟 客户 端 SQL 数 据 库 中 一 个 条 日 
的 内 容 (请 记 住 ， 不 要 求 你 在 客户 端 保 存 整 个 数据 集 )。 
虽然 使 用 数据 存储 的 典型 情况 涉及 服务 器 端的 SQL 数 据 库 ， 但 如 果 浏 览 器 中 有 LocalStorage 
或 者 SessionStorage， 那 数据 存储 也 能 使 用 它们 保存 数据 。 把 Ext JS 数据 存储 想象 成 一 个 API， 把 
当前 的 数据 传输 选择 (JSON 、XML 或 者 LocalStorage ) 想象 成 API 的 一 个 实现 。 

在 深入 帘 探 数据 存储 之 前 , 让 我 们 首先 来 定义 一 下 你 拥有 的 数据 使 用 选项 。 在 一 个 代理 获取 
到 原始 数据 后 , 一 个 读 取 器 对 数据 进行 读 取 或 者 解析 。 读 取 器 从 未 格式 化 的 原始 数据 对 象 中 提炼 
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出 数据 点 ， 也 就 是 所 谓 的 数据 索引 ， 并 把 它们 组 织 成 名 称 数 据 对 ， 或 者 一 般 对 象 。 图 7-5 展 现 了 
这 一 映射 如 何 使 用 。 








读 取 器 





数据 存储 
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图 7-5 一 个 读 取 咒 映 射 原始 数据 或 者 未 格式 化 数据 ， 使 之 
可 以 被 插入 模型 ， 后 者 然后 被 导入 一 个 数据 存储 
可 以 看 到 ， 未 格式 化 的 原始 数据 被 组 织 并 传 入 读 取 器 创建 的 Moae1 实 例 。 这 些 Mode1 类 的 实 
例 然 后 被 导入 数据 存储 中 ， 准 备 被 一 个 部 件 使 用 。 








注意 Ext JS 3 的 Ext .data.Record 也 就 是 Ext JS 4 中 的 Ext .data.Model。 这 个 名 称 改 变更 直 
接地 确立 了 本 书 第 三 部 分 描述 的 “模型 ~ 视图 - 控制 器 ”模式 中 数据 存储 的 模型 部 分 。 


























一 个 Model 是 一 个 完全 由 Ext JS 管理 的 JavaScript 对 象 。 跟 Ext JS 管理 Element 类 很 相似 的 是 ， 
Mode1l 类 也 有 获取 方法 和 设置 方法 ， 以 及 数据 存储 绪 定 的 一 个 完整 的 事件 模型 。 这 种 数据 管理 方 
式 可 以 给 框架 增加 可 用 性 和 一 些 很 酷 的 自动 功能 。 

7.4 节 将 介绍 如 何 使 用 获取 方法 和 设置 方法 通过 数据 存储 更 新 模型 数据 ， 但 首先 我 们 要 为 数 
据 的 更 新 打 好 基础 , 描述 数据 写 入 器 在 其 中 如 何 发 挥 作用 , 以 及 如 何在 与 数据 存储 交互 以 前 校 验 
你 的 数据 。 

Reader 这 个 类 负责 协助 转化 从 数据 源 输入 的 数据 。 它 转化 输入 的 数据 , 并 实例 化 Model 定 义 
的 实例 ， 后 者 由 数据 存储 收集 。 读 取 器 的 类 型 有 很 多 ， 而 在 本 章 中 你 要 把 它们 逐个 实现 。 


7.2” 读 取 和 保存 数据 


有 多 种 不 同 的 使 用 数据 的 选项 。 每 种 选项 都 有 着 不 同 程 度 的 复杂 性 ， 所 以 在 开始 使 用 数据 存 
储 以 前 应 该 仔细 考虑 需求 。 所 选择 的 数据 传输 机 制 会 影响 需要 用 到 Ext .data.Proxy、Ext. 
data.Reader 和 Ext .data .Writer 的 哪些 子 类 ，。 

在 读 取 数据 时 , 请 记 住 数据 端点 是 把 Ext .data .Field 用 作 一 个 数据 存储 抽象 的 Ext .data. 
model。 所 以 当 读 取 完 数据 时 ， 读 取 数 据 所 采取 的 步骤 变 得 与 其 他 的 应 用 代码 不 相干 。 这 就 意 
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味 着 在 后 来 的 阶段 中 , 如 果 应 用 一 开始 使 用 XML 来 作 传输 介质 的 话 , 那么 可 以 选择 用 JSON 来 代 
替 XML。 
7.2.1 读 取 数 组 数据 


数据 存储 最 简单 的 使 用 方式 是 把 内 联 数据 读 人 到 一 个 组 件 里 。 试 想 一 种 典型 的 使 用 情况 , 给 
一 个 人 选择 一 个 头衔 。 可 以 使 用 一 个 组 合 框 方法 来 实施 , 把 头衔 列表 置 入 像 这 样 的 一 个 内 联 数据 
数组 : 


. 


























Xtype 7 OMe 
name : 'title', 
fieldLabel : 'Title', 
queryMode : 'local', 
ValueField : 'title', 
store i UM MS DE 


} 

请 注意 store 声 明 在 这 里 只 占 了 单独 的 一 行 ， 而 其 他 行 代码 与 组 合 框 有 关 。 如 果 这 是 你 第 一 
次 接触 Ext JS， 那 这 个 示例 可 能 会 令 人 有 点 儿 困惑 。ExtJS 提 供 了 很 多 快捷 方式 和 便利 类 ,而 这 是 
一 个 最 佳 的 示例 。 
组 合 框 示例 没有 一 个 model 或 者 fielgs 定 义 。 在 数据 存储 的 构建 阶段 ，Ext JS 会 创建 
Ext .aata.ArrayStore， 后 者 会 自动 替 你 调用 Ext .data.reader.Array， 并 设置 它 以 便 用 于 
运行 时 间 。 

让 我 们 更 深入 地 探讨 数据 数组 存储 和 数组 读 取 器 ， 以 更 熟悉 数组 数据 的 使 用 过 程 ， 如 以 下 代 
码 清单 所 示 。 


代码 清单 7-1 创建 一 个 读 取 本 地 数组 数据 的 数据 存储 



































var arrayData = [ 

['Jay Garcia', uv We 创建 本 地 数 

['Aaron Baker', VR] 组 数据 

['Susan Smith', DE 

['Mary Stein', 'DE'] 

['Bryan Shanley', 'NJ'] 

['Nyri Selgado', “EA 
] 

到 创建 用 户 模型 

Ext .define('User', { 

extend : 'Ext.data.Model', 

fields : [ 

1 SR ©@ 声明 字段 
name : 'name', 


mapping : 1 


name et 
mapping : 2 
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} 
] 
Ps 


创建 数据 
store = Ext .create('Ext.data,;Store’; 蔷 存储 
model : 'User', 
EOXY 开 
type : 'memory', 
reader : { 
model : 'User', 
type » "array. 
} 
} 
全 这 
把 数据 读 入 
store.loadData(arrayData); 数据 存储 


console.log(store.first() .data) 


在 代码 清单 7-1 中 ， 实 现 了 全 部 的 数据 存储 配置 。 首 先 创建 一 个 数组 的 数组 ， 后 者 通过 变量 
arrayData 加 以 引用 @。 请 密切 关注 数组 数据 所 采用 的 格式 ， 因 为 这 是 ArrayReader 类 的 预期 
格式 。 数据 之 所 以 是 一 个 数组 的 数组 , 原因 在 于 包含 在 父 数 组 里 的 每 个 子 数组 都 被 视 为 一 条 单独 
的 记录 来 对 待 。 

创建 一 个 用 户 模 型 @@, 这 个 模型 将 被 用 作 模 板 来 映射 数组 数据 点 以 创建 记录 。 把 一 个 对 象 党 
量 的 数组 ， 也 就 是 fields 合 ， 传 入 配置 对 象 ， 并 详细 列 出 每 个 字段 名 及 其 映射 。 这 些 对 象 常量 
每 一 个 都 是 Ext .data.Field 类 的 配置 对 象 ， 后 者 是 Ext .data.Model 中 最 小 的 被 管理 数据 单 
元 。 在 这 里 ,把 字段 名 映射 到 每 条 数组 记录 的 第 一 个 数据 点 上 , 并 把 字段 状态 映射 到 第 二 个 数据 
点 上 。 

接 下 来 ， 用 一 个 Memory 代 理 创 建 一 个 aata _ Store 的 实例 ， 这 个 Memory 代 理 将 会 从 内 存 中 
读 取 未 格式 化 的 数据 @。 

然后 添加 一 个 ArrayReader 实 例 @， 它 负责 整理 该 代理 获取 到 的 数据 ， 并 且 创 建 刚 刚 创 建 
的 新 用 户 模型 的 新 实例 。 在 数据 存储 读 取 数据 的 时 候 ， 数 组 读 取 器 读 取 每 条 记录 ， 并 创建 一 个 新 
的 User 实 例 ， 把 解析 过 的 数据 传 给 该 实例 ， 然 后 把 它 读 入 数据 存储 。 

以 上 就 是 端 对 端 创建 一 个 数据 存储 读 取 数组 数据 的 示例 。 利用 这 一 模式 ,可 以 改变 该 数据 存 
储 可 以 读 取 的 数据 的 类 型 。 为 此 ， 要 用 一 个 JsonReader 或 者 XmlReader 来 代 蔡 ArrayReader。 
同样 ,如 果 想 改变 数据 存储 ,可 以 把 MemoryProxy 换 成 其 他 代理 ,比如 Http Proxy、JsonP Proxy 
或 者 Direct Proxy。 

回想 一 下 ， 之 前 提 到 过 便利 类 可 以 让 我 们 的 工作 更 轻松 。 如 果 要 用 Arraystore 便 利 类 重建 
数据 存储 ， 使 用 之 前 的 arrayData 的 代码 将 会 是 这 样 : 































































































Var store = Ext.create('Ext.data.ArrayStore', { 
data : arrayData, 
fields : ['personName', 'state'] 


}); 
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可 以 看 到 , 在 这 个 示例 中 用 字段 的 快捷 符号 来 创建 一 个 Ext .data .ArrayStore 的 实例 。 为 
此 ， 要 传人 一 个 数据 的 引用 (也 就 是 arrayData )， 并 传人 一 个 字段 列表 ， 由 它 来 提供 映射 。 注 
意 ，fields 属 性 是 一 个 简单 的 字母 串 列 表 。 这 是 一 个 完全 有 效 的 字段 映射 配置 ,因为 Ext JS 足够 
智能 ， 可 以 根据 以 这 种 方式 传人 的 字符 串 值 来 创建 名 称 和 索引 映射 。 还 可 以 在 一 个 fields 配 置 
数组 中 混合 对 象 和 字符 串 。 比 如 说 ， 以 下 配置 完全 有 效 : 

fields 2 [ 


'fullName', 
{ 



































name : 'state', 
mapping : 2 
} 
] 

像 这 样 的 灵活 使 用 会 很 酷 。 不 过 要 知道 使 用 这 样 的 混合 字段 配置 可 能 会 略微 有 损 代 码 的 易 读 性 。 
使 用 这 个 便利 类 可 以 不 用 非得 创建 代理 ， 记 录 模 板 和 读 取 器 来 配置 数据 存储 。 使 用 JSON 
数据 存储 或 者 XML 数据 存储 也 同样 简单 ， 稍 后 你 就 将 了 解 到 。 接 下 来 ， 将 使 用 便利 类 来 节省 
时 间 。 











7.2.2 读 取 JSON 数据 

JSON 存 储 要 比 数组 存储 更 复杂 一 点 ， 因 为 它 也 可 以 读 取 相 关 的 数据 结构 ， 并 从 服务 器 获取 
数据 。 很 多 人 选择 用 服务 器 端 栈 提 供 JSON 数 据 ， 因 为 这 样 浏览 器 更 容易 消化 数据 。 

我 们 假设 从 服务 器 端 获 取 到 了 这 样 一 个 JSON 格 式 的 部 门 列表 。 





"data™s 
{ 
tel 和 
"name" ; "ACCOUNting"™, 
"active" : null, 
"dateActive" L220OLZO0LL. 
"dateInactive" : null, 
"description" : null, 
"director" 0 
"numEmployees" : "45" 
} 
J 
"meta" : { 
"success" : true, 
rmsg" mn 


} 
} 


当 跟 服务 器 对 话 时 ， 获 取 数 据 的 过 程 中 可 能 会 出 现 某 些 问 题 ( 比如， 数据 库 可 能 出 故障 )。 
所 以 要 在 响应 后 发 送信 息 以 确认 该 响应 是 否 成 功 , 并 在 出 错 的 时 候 发 送 一 条 自 定 义 出 错 信息 。 这 
个 方法 可 以 轻易 地 更 换 出 错 信息 ， 而 不 用 担心 服务 器 上 的 特定 设置 细节 ( 如 果 在 proxy 上 设置 
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successProperty 属 性 ， 那 出 错 处 理 是 自动 完成 的 ， 如 代码 清单 7-2 所 示 )。 
以 下 代码 清单 显示 了 如 何 使 用 Jsonstore 便 利 类 来 读 取 JSON。 可 以 在 examples/ch07 里 找到 
这 个 代码 清单 里 指定 的 data.json 文 件 。 


代码 清单 7-2 读 取 JSON 数 据 


Var departmentStore = Ext.create('Ext.data.Store', { 
Ereldse [ 实例 化 Jsonstore 


'name', 
'active', 
'dateActive', 
'dateInactive', 
'description', 
"dletor.y 
'numEmployees', 











五 aime: "id'; 
type : "nt 
} 


] 选择 Ajax 代 理 
proxy 3 1{ 9 设置 URL 


type : 'ajax', 
url : 'data.json', 
reader : { 
type On, 
root : 'data', 
idProperty : 'id', 配置 JsonReader 
successProperty : 'meta.success' 


je 


departmentStore.load(t{ 
callback : function(records, operation, successful) { 
if (successful) { 


console.log('department name:', 
records[0] .get ('name')); 0 打印 第 一 条 


} 记录 


else { 
console.log('the server reported an error'); 
, } 

}); 

首先 设置 一 个 带 field 定 义 的 JsonStore@，, 然后 选择 一 个 Ajax 代理 四 ,设置 用 于 联系 的 服 
务 器 ur1 加 ,并 且 配 置 IsonReader (注意 ， 这 个 示例 所 指 的 是 本 地 安装 地 址 ; 请 在 本 书 所 附 的 
示例 中 查找 一 个 示例 列表 ， 地 址 http:/extjsinaction.com/v4/examples/ch07 )。 把 读 取 器 类 型 设 为 
JjSOn, 把 root@ 设 为 daata。 配 置 reader 的 时 候 ， 设置 idProperty 和 successProperty 属 性 ， 
以 跟踪 服务 器 更 新 时 的 变化 ， 稍 后 即 可 看 到 。Ext JS 需要 idqProperty， 以 便 在 发 送 更 新 回 服务 
融 以 前 进行 内 部 秒 记 。 最 后 ， 打 印 出 服务 器 获取 的 列表 的 第 一 条 记录 全 。 
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7.2.3” 读 取 XML 数 据 
还 可 以 选择 把 XML 数据 读 入 数据 存储 。 我 们 假设 部 门 列 表 是 XML 格式 的 : 

















<?xml] version="1.0" encoding="UTF-8" ?> 
<Response> 
<data> 
<node> 
> 
<name>Accounting</name> 
<active>true</active> 
<dateActive>12/01/2001</dateActive> 
<dateInactive></dateInactive> 
<description>Accounting services</description> 
<director></director> 
<numEmployees>45</numEmployees> 
</node> 
</data> 
<meta> 
<success>true</success> 
<msg></msg> 
</meta> 
</Response> 


7 
接 下 来 这 个 代码 清单 展示 了 如 何 把 XML 格式 的 数据 读 取 转 化 为 在 之 前 示例 中 使 用 的 字段 。 7 
可 以 在 examples/ch07 中 找到 data.xml 文 件 。 


代码 清单 7-3 ” 读 取 XMI 数 据 
Var departmentStore = Ext.create('Ext.data.Store', { 

fields : [ 
'name', 
'active', 
‘'dateActive', 声明 字段 
'dateInactive', 
'description', 
"gireetor'. 
‘numEmployees', 


{ 

















i 使 用 xmlstore 


id; 
"ay 


name 
mapping : 


J 

Feagte ,oe 
type aod, 
url : “data,xml', 
reader : { 


type 
record 
idPath 


successProperty : 


Ll 

'node', 

ko a 
'meta/success’' 


9 选择 xmlReader 
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上 
和 
departmentStore.load(t{ 
callback : function(records, operation, successful) { 
console.1log (operation) 
if (successful) { 
console.log("department:%o", records[0]); 
} 
else { 
console.log("the server reported an error"); 


} 
ji 


为 读 取 XML， 要 选择 一 个 XxMLStore@， 并 声明 fie1lgs@@,， 类 似 于 在 之 前 示例 中 的 做 法 。 读 
取 XML 时 , 需要 一 个 XMLReader@,， 日 必 须 使 用 record 属 性 声明 在 哪里 可 以 找到 XML 中 的 记录 
数据 。 正 如 在 之 前 的 示例 中 ,设置 idPath 和 successProperty 可 能 会 有 用 处 。 

你 已 经 学 习 了 如 何 把 数据 读 入 数据 存储 ， 现 在 是 时 候 学 习 如 何 写 数据 了 。 


7.3” 带 瑟 入 器 的 数据 存储 


Writer 可 以 节省 时 间 和 精力 ， 让 你 无 需 再 编写 Ajax 请 求 和 异常 处 理 ， 让 你 有 更 多 时 间 做 那 
些 重要 的 事 ， 比 如 为 应 用 构建 业务 逻辑 。 在 开始 编程 实现 writer 之 前 ,应 该 先 评估 writer 在 其 
中 如 何 适 用 。 

要 使 用 writer， 需 要 重新 配置 数据 存储 以 及 支持 的 代理 。 不 是 为 该 代理 配置 一 个 url 属 性 ， 
而 是 要 创建 一 个 配置 对 象 api。 代 理 api 是 一 个 新 概念 ， 在 稍 后 我 们 回顾 示例 代码 的 时 候 将 详细 
讨论 。 

需要 创建 一 个 writer 实 例 ， 并 把 它 插入 数据 存储 ， 同 时 给 数据 存储 的 配置 对 象 本 身 添加 一 
些 新 的 配置 属性 ， 如 以 下 代码 清单 所 示 。 


代码 清单 7-4 ”Employee 数 据 存储 






















































































var urlRoot = 'http://extjsinaction.com/crud.php?model=Employee&method='; 
Var employeeStore = Ext.create('Ext.data.Store', { 
model : 'Employee', 
NEONy 3 1 
type 2 son ee 
api Ca 
create : urlRoot + 'CREATE', 
read : UrlRoot + 'READ', 创建 新 代理 
Update : urlRoot + 'UPDATE', pee 
destroy : urlRoot + 'DESTROY' 
> 
reader : { 设置 JSON 读 
type Sr OT 取 器 
root 2 la a 
idProperty se 


successProperty : 'meta.Success' 
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} 


writer : { 

type 人 is 
encode : true, 

writeAllFields : true, 

root : 'data', 

allowSingle : true, 

batch : false, 

writeRecords : function(request, data) { 


request.jsonData = data; 
return request; 


}); : 

employeeStore.1oad(); 

在 代码 清单 7-4 中 , 创建 一 个 引用 Exployee 模 型 @ 的 数据 存储 , 并 使 用 一 个 带 配 置 对 象 的 Ajax 
代理 @ 作 为 属性 api@， 后 者 为 每 一 个 CRUD 操 作 指 定 了 URL， 而 read 就 是 读 取 数据 的 请 求 。 你 
将 使 用 有 一 定 智能 的 远程 服务 器 端 代码 ， 其 中 每 个 CRUD 操 作 都 有 一 个 控制 器 。writez 需 要 有 
智能 响应 ， 因 此 ， 开 发 出 了 远程 服务 器 端 代 码 。 使 用 相同 的 服务 器 端 技术 来 处 理 所 有 CRUD 操 作 
是 个 好 主意 〈 请 参考 本 书 第 三 部 分 的 示例 应 用 ， 了 解 相关 示例 )。 




















注意 在 这 本 书 附送 的 示例 集中 ， 你 会 找到 这 个 示例 的 一 个 版 本 ， 参 阅 了 extjsinaction.com 
( employee_store.html )。 这 个 示例 会 让 你 读 取 但 并 不 更 新 数据 。 如 果 你 希望 了 解 执行 CRUD 
操作 的 效果 ， 那 么 建议 遵照 第 7 章 附 带 的 readme.txt 中 的 指示 。 这 个 文件 会 教 你 在 MySQL 
中 设置 数据 库 ， 以 及 配置 附带 的 服务 器 端 代码 。 

















接 下 来 创建 一 个 Ext .data.Wzriter 的 子 类 ， 也 就 是 son Writer@, 它 有 可 能 可 以 保存 
一 个 请 求 来 修改 单条 记录 或 者 一 批 记 录 。 这 个 示例 展示 了 如 何 通 过 用 盖 updateRecords@， 
确保 Writer 一 次 写 入 一 条 记录 ,在 JsonWriter 配 置 对 象 中 ,把 writerAllFields 设 为 true， 
这 可 以 确保 每 一 次 操作 writer 都 返回 所 有 属性 ; 这 一 策略 很 利于 开发 和 调试 。 当 然 了 ， 在 开 
发 中 会 希望 把 这 个 writeraAllFields 设 为 false， 这 会 减少 网 络 上 和 服务 器 端 以 及 数据 库 栈 
的 负担 。 























注意 可 以 在 代理 中 和 替 盖 Reader 和 Writer，ExtJS 中 大 多 数 其 他 功能 都 可 以 覆盖 。 如 果 提 供 的 
类 不 符合 你 的 需求 ， 那 很 可 能 Ext JS 开发 社区 中 的 某 人 已 经 实现 了 一 个 自 定义 类 。 访问 
http://sencha.com/forum， 看 在 开始 实现 你 自己 的 自 定义 解决 方案 以 前 能 找到 什么 。 





我 们 建议 用 writer 进 行 开 发 时 ， 给 数据 存储 添加 一 个 全 局 异常 事件 监听 器。 如 果 你 希望 对 
数据 存储 产生 的 任务 异常 都 进行 处 理 , 那 就 需要 这 个 监听 器 。 在 开发 应 用 的 时 候 , 我 们 把 所 有 参 
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数 都 发 送 到 Firebug 控 制 台 , 因为 它 提供 了 大 量 在 调试 过 程 中 别处 难以 找到 的 信息 。 我们 强烈 建议 
你 也 这 么 做 。 相 信 我 们 ， 长 远 来 看 这 么 做 会 节省 时 间 。 

在 为 写 和 人 需 实 现 服务 器 端 数据 端点 的 时 候 ， 你 会 注意 到 如 果 选 择 Json 代 理 ， 那 所 有 参数 都 是 
作为 GET 参 数 发 送 的 。 如 果 想 在 使 用 Ajax 代理 和 JsonP 代 理 之 间 转 换 的 话 ， 请 牢记 这 一 点 。 








7.3.1 校 验 模型 数据 


除了 指定 模型 内 字段 的 预期 类 型 和 格式 以 外 , 还 可 以 指定 在 任何 一 次 尝试 更 新 数据 存储 之 前 
运行 的 校 验 。 在 Ext JS 4 中 ， 可 以 直接 用 模型 来 校 验 字段 ， 在 此 之 前 必须 要 在 使 用 表单 面板 时 执 
行 校 验 。 把 校 验 代码 放 在 靠近 字段 类 型 描述 的 地 方 ， 可 以 更 清晰 地 指定 域 模型 中 的 规则 。 

你 可 能 还 记得 ， Ext .data.Field 可 能 包含 : 

口 一 个 名 称 ; 

口 一 个 类 型 〈 自动 型 、 字 符 串 型 、 整 型 、 浮 点 型 、 布 尔 型 、 日 期 型 ); 

口 一 个 defaultValue; 

口 一 个 转换 函数 ( 用 来 转换 一 条 输入 记录 )。 

当 使 用 Ext .data.Store 时 , 所 有 数据 都 传人 Ext .data .Model, 使 得 它 成 为 一 个 执行 数据 
校 验 的 明显 场所 。 在 下 面 这 个 代码 清单 中 ,让 我 们 通过 设置 一 个 代表 某 部 门 雇员 的 模型 来 探讨 这 
一 点 。 












































代码 清单 7-5” 带 校 验 的 雇员 模型 
Ext .define ("Employee", { 
extend : 'Ext.data.Model', 
fields 本 
'firstName', 
'lastName', 
'middle', 
titler, 
'street', 
nelly 
'state', 
"Zi 
'departmentName', 
'rate', 
'officePphone', 
'homePhone', 
'mobilePhone', 
'email', 


name : 'id', 
type : 'int' 


name : 'departmentId', 
Ye 6 转化 为 整 型 
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name : 'dateHired', 
type » ‘date'; 
format : 'Y-m-d' 

. " 指定 aateHired 
name : 'daterFired', 
type : 'date', 
format, i “Y=m: 

}, 

{ 
name “dob, 
type : 'date', 
format” » "Y=m=Q) 

} 

| 
validations : [ 

{ 
type : 'presence', a 增加 存在 校 验 
field : 'firstName' 

{ 
type : 'presence', 
field : 'lastName' 

和 

{ 
type : 'presence', 
field : 'departmentId' 

i 9 
type : 'format', 
field : 'email', 


matcher : /@/ 


3 


一 种 常见 的 使 用 情况 是 拥有 一 个 ia 和 几 个 外 键 ， 都 为 int 型 @。 还 可 以 指定 dateHired@、 
dateFired 和 dopb 日 期 。 

可 以 直接 在 模型 上 实施 校 验 是 Ext JS 4 中 的 新 功能 。 在 这 个 示例 中 可 以 看 到 如 何 使 用 一 个 存 
在 校 验 全 和 一 个 格式 校 验 @。 

假设 要 在 第 15 号 部 门 添加 一 个 很 年 轻 的 雇员 : 














var sofie = Ext.create('Employee', { 
firstName : 'Sofie', 
lastName : 'Andresen', 
dob : Extutil.Format date( 2007/12/15", "Y-m=d"')., 
email .JOOFTe A 


站 
如 果 运 行 以 下 代码 : 


150 第 7 章 数据 存储 





Var errors = sofie.validate(); 


就 会 得 到 一 张 含 有 两 条 出 错 信 ， 
所 以 弹出 第 二 条 出 错 信 筷 ， 是 因为 她 才刚 学 


























息 的 列表 。 第 一 条 出 错 信息 显 示 Sofie 还 没有 关联 到 一 个 部 门 , 而 之 
会 如 何 打 她 的 名 字 ， 还 不 知道 什么 是 电子 邮件 。 所 以 
让 我 们 先 不 着 急 把 Sofie 添 加 到 Employee 数 据 存储 。 





如 果 用 其 他 的 数据 成 功 地 检验 了 模型 数据 而 又 没有 出 错 , 那 就 做 好 添加 新 雇员 , 与 数据 存储 


进行 交互 的 准备 了 。 
7.3.2 同步 数据 











你 可 能 还 记得 图 7-1 中 ， 数 据 存储 理应 是 由 使 用 者 部 件 来 使 用 的 。 因 此 对 于 真实 的 应 用 ， 要 
对 部 件 的 事件 做 出 响应 ， 并 根据 代码 中 的 事件 来 操作 。 比 如 说 接收 到 一 个 保存 按钮 的 onclick 
事件 ， 那 就 适宜 使 用 部 件 中 现 有 的 数据 来 更 新 数据 存储 中 相应 的 模型 。 

我 们 会 在 后 面 的 儿童 中 详细 介绍 一 个 使 用 者 部 件 如 何 与 数据 存储 交互 。 现 在 , 让 我 们 来 探究 
如 何 用 数据 存 代 和 模型 中 可 用 的 指令 来 更 新 认 员 数据 。 




















注意 在 学 习 如 何 与 数据 存储 交互 的 时 候 ， 


JavaScript 示 例 代码 片段 。 








你 可 以 直接 在 首选 浏览 器 的 开发 工具 中 输入 


首先 可 以 用 set 和 get 来 更 新 模型 。 数 据 包 是 有 智能 的 ， 所 以 它 知道 在 同步 时 什么 时 候 会 碰 


到 需要 更 新 的 脏 数 据 。 





var firstEmployee = employeeStore.first(); 
firstEmployee.set('firstName', 'Anita' 
'Andresen' 


firstEmployee.set('lastName', 
employeeStore.sync(); 


在 这 里 获取 Employee 数 据 存储 里 第 一 














如 果 想 给 15 号 

Var jacob = Ext.create('Employee', { 
firstname : 'Jacob', 
lastName 'Andresen', 


departmentId : 15, 














个 可 用 雇员 模型 的 引用 ,把 名 改 成 Anita, 把 姓 改 成 Andresen， 
并 同步 数据 存储 。 这 一 步 会 激活 代码 清单 7-4 里 提供 
部 门 增加 一 个 新 雇员 ， 可 以 创建 以 下 雇员 模型 : 








t 的 示例 自 定 义 写 和 人 需 。 








email : 'jacob.andresen@gmail.com' 


}); 
它 添加 到 Employee 数 据 存储 然后 同步 : 


employeeStore.add (jacob); 
employeeStore.sync(); 








or 











如 果 对 模型 的 一 项 校 验 操作 失败 ， 对 新 记录 的 同步 操作 就 会 失败 。 举 例 来 说 ， 如 果 你 忘 了 
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Jacopb 记 录 分 配 一 个 aepartmentIdq。 那 这 条 记录 就 不 会 出 现在 调用 sync 方 法 创建 的 记录 列表 
中 。 


注意 可 以 在 调用 sync 方 法 前 调用 数据 存储 的 getNewRecords 方 法 ， 查 询 要 创建 的 是 哪些 记 
录 。 如 果 和 希望 查询 修改 过 的 记录 , 可 以 调用 getModifiedRecords 方 法 , 而 getRemoved 
Records 方 法 显示 同步 时 会 移 除 哪些 记录 。 


如 果 想 移 除 Employee 数 据 存储 中 的 最 后 一 条 记录 ， 那 么 可 以 这 么 做 : 


Var lastEmployee = employeeStore.last();} 
employeeStore.remove (lastEmployee); 
employeeStore.sync(); 


注意 在 Ext JS 4 中 ， 还 可 以 直接 使 用 模型 的 代理 功能 对 模型 执行 读 取 、 保 存 和 销毁 操作 。 请 注 
意 ， 确 保 在 程序 中 保持 编程 风格 的 一 致 。 如 果 混 合 使 用 两 种 编程 风格 ， 那 代码 可 能 会 
得 很 难 读 。 


如 果 你 看 过 在 把 数据 读 入 Employee 数 据 存储 时 获取 的 数据 ,那么 可 能 注意 到 了 一 个 URL 里 的 
page、start 和 1imit 参 数 ， 看 起 来 就 像 这 样 : 
http://extjsinaction.com/ 


crud.php?model=Employee&method=READ&_dc=1359395332718&page=1l&start=0&l1im 
it=25&callback=Ext .data.JsonP.callbackl 


page、start 和 1imit 参 数 都 是 系统 提供 的 标准 参数 ， 可 以 被 用 来 执行 分 页 操作 ( 把 数据 
显示 为 较 小 的 片段 ， 而 不 是 一 次 性 显示 全 部 数据 )。 我 们 将 在 第 8 章 介 绍 分 页 组 件 的 时 候 详 细 探 
究 分 页 。 

现在 你 对 于 什么 是 数据 存储 以 及 如 何 使 用 它 应 该 有 了 实践 知识 。 所 以 让 我 们 用 Ext JS 4 中 
引入 的 一 个 高 级 特性 来 结束 本 章 : 那 就 是 在 模型 之 间 使 用 Ext .data .Association 髓 套数 据 
的 功能 。 
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通过 般 套 数据 ， 可 以 在 运行 高 交互 性 应 用 的 同时 ,满足 少 占用 带宽 的 额外 需求 。 它 还 可 以 以 
一 种 相 比 于 使 用 Ext JS 3 更 准确 的 方式 来 表达 业务 逻辑 。 

试想 人 力 资源 部 分 配 了 任务 , 让 你 优化 应 用 , 使 之 能 够 支持 快速 修改 公司 所 有 部 门 的 雇员 数 
据 。 人 力 资 源 部 主管 渐渐 受 够 了 你 的 应 用 ， 他 管 它 叫 “传统 型 互联 网 应 用 ”"。“ 实 在 太 慢 了 ,” 他 
说 ,“ 我 浏览 数据 的 时 候 它 就 只 会 跟 服 务 带 交互 。 我 希望 应 用 可 以 在 我 浏览 所 有 部 门 的 雇员 列表 
的 同时 , 即时 地 更 新 雇员 数据 。 你 能 不 能 在 应 用 启动 时 就 读 取 所 有 数据 ?应 用 的 启动 时 间 长 一 点 
儿 我 无 所 谓 ， 我 只 期 望 能 用 在 我 们 的 千 兆 内 部 网 上 。” 
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你 可 能 很 想 告诉 他 , 你 这 个 分 部 门 显示 雇员 列表 的 好 主意 是 为 了 让 应 用 演 染 得 更 快 , 而 且 应 
用 已 经 很 快 了 ,在 抑制 了 如 此 争辩 的 冲动 后 ,你 开始 寻找 可 能 的 选项 。 幸运 的 是 , 没 过 多 久 你 就 
在 文档 里 找到 Ext .data .Model 的 描述 ， 并 发 现 它 包 含 了 Ext JS 4 中 的 关联 功能 。 看 来 要 使 用 关 
联 的 数据 读 取 , 你 必须 要 对 现 有 代码 进行 一 些微 调 , 这 样 可 以 一 次 性 地 读 入 所 有 部 门 和 所 有 雇员 
的 描述 。 
首先 增加 一 条 从 部 门 模型 到 雇员 模型 的 hnasMany 关 联 ， 如 以 下 代码 清单 所 示 。 


代码 清单 7-6” 带 关联 的 部 门 模型 
Ext .define('Department', { 
extend: 'Ext.data.Model', 
fields: [ 
we i 
'name', 
'active', 
'dateActive', 
'dateInactive', 
'description', 
'director', 
'numEmployees' 
























































] ， 


SotInNEO. :334 


field : 'name', 
dir "ADC 
sy 包含 hasMany 
associations: [{ 关联 
type : 'hasMany', 
model : 'Employee', 
name : 'employees' 


}] 
}); 


在 部 门 模型 中 ,判断 一 个 部 门 有 很 多 雇员 @, 把 关联 键 设 为 employees。 与 此 类 似 , 要 在 代 
码 清 单 7-5 的 employeeModel 中 设置 一 个 belongsTo 关 联 : 














Ext .define ("Employee", { 
extend: 'Ext.data.Model', 


fieldss [ww J]; 

associations: [{ 
type : 'belongsTo', 
model : 'Department', 
associationKey : 'departmentId' 


}] 
}); 


这 么 做 ， 可 以 访问 与 当前 部 门 相关 联 的 雇员 数据 。 下 面 这 个 代码 清单 使 用 代码 清单 7-5 和 代 
码 清 单 7-6 中 的 部 门 和 雇员 模型 。 
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代码 清单 7-7 读 取 部 门 关 联 的 雇员 数据 


Var urlRoot = 'http://extjsinaction.com/crud.php?model=Department&method='; 


Var departmentStore = Ext.create('Ext.data.Store', { 
model : 'Department', 
Do 和 

type : 'jsonp', 

fen 半 
create : urlRoot 
read : urlRoot 
update : urlRoot 
destroy : urlRoot 


'CREATE', 
READ , 

"UPDATE 
'DESTROY' 


+ 十 十 十 


> 

reader : { 
type PE el oi 
root "roata 
idProperty A ae bs 
successProperty : 'meta.success' 


}); 


departmentStore.loadl(t{ 


params : { Ne tke 
detail : true, 


Tm 
i 读 取 相关 数据 
callback : function() { 
{ 


departmentStore.each (function(department) 
department .employees() .each (function(employee) { 
var departmentId = department .get ('id'), 
departmentName = department .get ('name'), 
employeeId = employee.get ('id'), 
employeeName = employee.get ('firstName'); 


console.log(department1Id, departmentName, 
employeeId, employeeName); 





在 这 个 示例 中 , 要 求 示 例 的 服务 器 端 代码 提供 部 门 相关 联 的 详细 信息 ( 与 雇员 模型 相同 的 数 
据 模型 格式 ， 只 是 针对 部 门 进 行 了 过 滤 )。 参 数 detail@ 被 设 为 Lrue， 以 表示 服务 器 端 代码 应 











该 提供 对 应 部 门 的 相关 联 雇员 信息 。 
































然后 把 name 属 性 用 作 一 个 函数 来 使 用 相关 联 的 雇员 数据 ， 在 这 个 示例 中 也 就 是 
department .employee() 如 ,回想 一 下 ,代码 清单 7-6 在 部 门 模型 的 hasMany 关 联 中 提供 了 name 
属性 。 通 过 调用 aepartment .employees () ， 可 获得 了 Employee 数 据 存储 的 一 个 引用 ， 用 它 来 
遍历 与 该 部 门 相 关 的 雇员 。 在 这 个 示例 中 ,我 们 选择 了 打印 出 部 门 名 称 和 雇员 的 名 字 ， 这 应 该 能 






































HT 


证 明 可 以 访问 相关 联 的 雇员 数据 。 
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这 就 有 了 ， 使 用 Ext JS 数据 存储 的 拒 套 数据 。 





7.5 小结 


本 章 介 绍 了 数据 存储 ， 以 及 很 多 支持 数据 存储 的 类 。 你 看 到 了 对 各 种 不 同 支 持 类 的 概要 分 
析 ， 了 解 到 代理 负责 获取 数据 ， 而 读 取 咒 负责 转化 数据 并 创建 Model 实 例 以 插入 数据 存储 本 身 。 

入 门 数据 存储 的 世界 之 后 ， 你 深入 学 习 了 如 何 加 载 和 使 用 Array、XML 和 JSON 数 据 。 然 后 ， 
你 知道 了 如 何 使 用 数据 写 人 器 和 数据 存储 的 sync 方 法 持久 保存 数据 。 最 后 ， 你 探究 了 数据 包 的 
数据 关联 功能 ， 在 此 过 程 中 读 取 了 带 相 关 雇 员 信 息 的 部 门 数据 。 

在 接 下 来 的 一 章 中 ， 我们 深入 探究 第 一 个 复杂 数据 驱动 视图 : 网 格 面板 。 














第 8 章 


网 格 面 板 








本 章 内 容 

口 学 习 网 格 面板 

口 使 用 已 有 的 列 实现 

口 启用 网 格 面板 的 分 页 功能 
口 创建 可 编辑 的 网 格 面 板 

口 使 用 数据 存储 实现 CRUD 




















从 Ext JS 早期 开始 ， 网 格 面板 就 是 框架 最 核心 的 部 分 了 。 从 很 多 方面 来 说 ， 至 今 这 一 点 依然 
成 立 。 组 庸 置疑 ， 网 格 面板 是 ExtJS 中 功能 最 强大 的 部 件 之 一 , 它 通 过 表格 形式 提供 了 高 速 的 数据 
访问 。 使 用 网 格 面板 可 以 直观 地 查看 并 操作 大 数据 集 , 这 个 类 能 够 满足 大 部 分 企业 和 办 公 应 用 的 
需要 。 注 意 , 在 ExtJS 4.1 中 网 格 经 历 了 一 次 重大 的 性 能 改进 。 现 在 网 格 非常 快 ， 以 至 于 我 们 不 再 
需要 Ext JS 之 前 发 布 版 本 中 的 列表 视图 了 。 

本 章 将 基于 前 一 章 的 数据 存储 ,围绕 网 格 面板 展开 介绍 。 你 将 从 构建 一 个 网 格 面板 开始 学 习 
之 旅 , 它 的 数据 存储 从 本 地 内 存 中 读 取 数组 数据 。 在 探索 完 基础 知识 之 后 ,你 将 学 习 一 些 高 级 特 
性 , 比如 分 页 和 滚动 条 。 最 后 , 你 将 学 习 如 何 编 辑 网 格 面板 中 使 用 了 数据 存储 的 数据 并 与 之 交互 ， 
以 及 最 后 一 章 中 涉及 的 CRUD 操 作 。 

在 学 习 过 程 中 的 每 一 步 , 你 都 会 了 解 更 多 关于 网 格 面 板 及 其 支持 类 的 内 容 。 在 此 之 前 , 我 们 
先 认识 一 下 网 格 面板 。 


8.1 网 格 面板 简介 


乍 看 之 下 ， 网 格 面板 看 上 去 就 像 一 个 美化 了 的 HTML 表 格 。HTML 表 格 已 经 多 年 被 用 于 展示 
数据 。 如 果 你 花 点 儿 时 间 看 一 个 Ext JS 网 格 的 示例 ， 就 会 意识 到 这 不 是 一 个 普通 的 HTML 表 格 。 
你 可 以 从 这 里 看 一 个 使 用 数组 存储 器 的 网 格 面板 的 实现 示例 : http://mng.bz/HAcK ( 参见 图 8-1 )。 

在 这 个 基于 数组 的 网 格 示例 中 , 你 可 以 看 到 这 个 部 件 提供 的 功能 远 远 超过 了 典型 的 HITML 表 
格 。 这 其 中 包括 了 列 管 理 功能 比如 排序 、 重 置 大 小 、 重 排 、 展 示 以 及 隐藏 。 鼠 标 事件 同样 是 开 箱 
即 用 ， 它 允许 在 鼠标 停留 在 一 行 的 时 候 高 亮 显 示 这 一 行 ， 甚 至 点 击 选择 这 行 。 
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Array Grid 

Company Price Change % Change Last Updated 
3m Co S71.72 0.02 0.03% 09/01/2009 
Alcoa Inc S29.01 0.42 1.47% 09/01/2009 
Altria Group Inc S83.81 0.28 0,34% 09/01/2009 
American Express Company S52.55 0.01 0.02% 09/01/2009 
American International Group, Inc. S64.13 0.31 0.49% 09/01/2009 
AT&T Inc. S31.61 0.48 1.54% 09/01/2009 
Boeing Co. S75.43 0.53 0.71% 09/01/2009 
General Eleciric Company S34.14 0.08 0.23% 09/01/2009 
General Motors Corporation S30.27 1.09 3.74% 09/01/2009 
Hewlett-Packard Co. S36.53 0.03 0.08% 09/01/2009 < 


图 8-1 可 下 载 的 SDK 包 中 exmaples 文 件 夹 下 的 数组 网 格 示 例 


这 个 示例 同时 也 展示 了 网 格 面板 的 视图 ( 也 叫 作 网 格 视图 ) 是 如 何 通过 定制 化 泻 染 器 来 定制 
的 ， 它 被 应 用 在 了 Change 和 % Change 列 上 。 这 些 定制 化 的 泻 染 紫 基 于 正人 负数 来 给 文本 上 颜色 。 

这 个 示例 仪 仅 是 浮光掠影 地 过 了 一 下 网 格 面板 的 配置 和 扩展 能 力 。 要 想 透 彻 地 理解 网 格 面板 
以 及 为 什么 它 的 扩展 性 如 此 之 好 ， 你 需要 知道 更 多 的 支持 类 


深入 学 习 


操控 网 格 面板 关键 的 支持 类 有 grid.view、SelectionModel 以 及 store。 让 我 们 来 快速 看 
一 个 网 格 面 板 的 实现 , 并 且 看 看 每 个 类 在 网 格 面 板 工作 的 机 制 中 发 挥 什么 样 的 作用 ( 参见 图 8-2 )。 


grid.header.Container 

















选择 模型 
关 
Name ID Address City State Zp 
A on Charies 136 6653 Turpis. + Odessa AK 13185 
grid.View (red) Aaron Deleon Ap #355-9871 Sania Rosa ”Chklahoma 84876 
Abdul Gomez 287-7400 Cdi Alpharotia OK 98455 
Abel Hatfield 1 Ap #929-5022 Vernon pA 33567 
Abigail Thomas 1 4509 Nec Rd，Passaic A 15950 
Abra Haynes 639 228.6210 Nor North Platte UT 00752 
Abra Vincent 308 P.O. Box 542, Bakersfield Nevada 35942 


Abraham Love 1319 3633 DonecA Sierra Vista DE 12218 


acqueline Hodges 159 PO. Box997, Hot Springs WA 00726 
Store 








图 8-2 ”网 格 面板 的 支持 类 : griqd.vVview、SelectionModel 和 Store 


在 图 8-2 中 ， 你 能 看 到 一 个 网 格 面板 和 它 的 支持 类 被 高 亮 了 。 从 头 看 起 ， 在 数据 源 中 可 以 看 
到 store 类 。 数 据 存储 用 一 个 读 取 器 来 工作 , 读 取 器 负责 从 数据 源 映 射 数据 点 ， 并 填充 到 数据 存 
储 中 。 它 们 可 以 分 别 用 数组 、XML 和 JSON 读 取 器 来 读 取 数 组 、XML 和 JSON 数 据 。 当 读 取 妖 解 
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析 数 据 时 ， 它 被 组 织 成 记录 ， 就 是 这 样 被 组 织 存放 到 数据 存储 中 的 。 

grigd.View 类 是 网 格 视图 的 一 个 UI 组 件 。 它 负责 读 取 数据 ， 并 控制 在 屏幕 上 夯 出 数据 。 

列 是 把 数据 字段 从 每 一 个 记录 中 映射 数据 字段 到 屏幕 上 的 类 ,它们 通过 dataIndex 属 性 来 做 
到 这 一 点 。dataIndex 被 设置 在 每 一 列 上 ， 人 负责 显示 它 从 数据 字段 中 映射 到 的 数据 。 

最 后 , SelectionModel 是 一 个 和 视图 一 起 工作 用 来 让 用 户 在 屏幕 上 选择 一 个 或 多 个 项 目的 
支持 类 。Ext JS 还 现成 地 支持 行 、 单 元 、 选 择 框 以 及 树 选择 模型 。selectionModel 用 来 跟踪 你 
在 屏幕 选择 了 什么 。 

现在 ， 你 已 经 学 习 了 基础 知识 ， 接 下 来 构建 一 个 简单 的 网 格 面板 。 


8.2 构建 一 个 简单 的 网 格 面板 


实现 网 格 面板 时 , 你 通常 需要 先 配置 数据 存储 。 这 是 因为 配置 数据 列 直接 关系 到 配置 数据 存 
储 的 字段 。 让 我 们 继续 使 用 你 在 前 一 章节 构建 的 雇员 存储 , 通过 声明 泻 染 网 格 面板 所 需要 的 数据 
列 来 连接 到 网 格 面板 上 ， 如 下 代码 清单 所 示 。 


代码 清单 8-1 创建 一 个 Arraystore， 并 将 之 绑 定 到 网 格 面板 
var arrayData = [ 
'Jay Garcia', 'MD'] 
'Aaron Baker', 'VA'] 
'Susan Smitnh', D/O 
'Mary Stein', FE 
] 
] 



















































































'Bryan Shanley', 'NJ' 
'Nyri Selgado', 'CA!' 


Var store = Ext.create('Ext.data.ArrayStore', { 
data : arrayData, 
fields : ['fullName', 'state'] 


var grid = Ext.create('Ext.grid.Panel', { 
title i; "OUur first grid".; 
renderTo : Ext.getBody(), 


autoHeight  : true, | 引用 数据 存储 

width 2505 

store : store, 9 设置 选项 模型 
selType : 'rowmodel', 


singleSelect : true, 
columns | 
2 将 数据 索引 映射 到 列 
header : 'Eul1 Name', 
sortable : true, 
dataIndex : 'fullName' 


header : 'State', 
dataIndex : 'State' 
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} 
] 
py 
首先 要 做 的 是 通过 name 和 state 值 来 引用 关联 的 数据 存储 @。 数 据 存 储 中 的 值 会 映射 到 
column 的 值 上 人 全。 你 需要 在 存储 中 为 每 一 列 设置 相对 应 的 dataIndex。 把 Full Name 列 定义 为 可 
排序 的 。 最 后 ， 指 定 rowMode1 为 选择 类 型 @。 图 8-3 展 示 了 面 格 在 屏幕 上 的 样子 。 


























列 菜 单 
调整 手柄 
排序 指示 Dur first grid 
— Eee 
Full Na ) db 
Baron Baker VA 
Bryan Shanley NJ 单个 选项 
Jay Garcia MD pe | 
Mary Stein DE 
Nyri Selgado CA 
Susan Smith DC 








图 8-3 第 一 个 展现 在 屏幕 上 的 网 格 面板 ， 展 示 了 配置 的 行 SelectionModel 以 及 可 排 
序 的 Full Name 列 


可 以 看 到 数据 并 没有 按照 定义 的 顺序 排列 。 这 是 因为 在 截屏 之 前 ， 我 们 点 击 了 Full Name 列 ， 
这 触发 了 这 一 列 的 点 击 事件 处 理 程序 。 点击 事件 处 理 程序 检查 这 一 列 是 否 是 可 排序 的 ( Full Name 
是 可 排序 的 )， 如 果 是 ， 则 调用 数据 存储 的 sort 方 法 ， 并 传人 数据 字段 ( aataIndex )， 这 里 是 
fullName。sort 方 法 继而 根据 刚刚 传 入 的 数据 字段 来 排列 所 有 的 数据 记录 。 它 先 按 照 升序 排列 ， 
然后 触发 降序 。 在 State 列 上 点 击 则 不 会 触发 任何 的 排序 ， 因 为 你 没有 像 对 Full Name 栏 做 的 那样 
定义 sortable:true。 

网 格 面 板 还 有 一 些 其 他 可 以 使 用 的 特性 。 可 以 拖 放 列 来 重新 排列 , 拖 动 大 小 重 置 手 柄 来 重 置 
大 小 ， 或 者 在 鼠标 移动 到 一 个 特定 列 上 的 时 候 点 击 列 出 现 的 菜单 图 标 。 

要 使 用 选择 模型 , 需要 点 击 一 行 来 选 定 它 。 一旦 完成 了 这 步 操 作 ， 可 以 在 键盘 上 按 向 上 键 和 
向 下 键 来 浏览 其 他 行 。 可 以 通过 去 除 singleSelect: true 并 局 用 multiselect : true 修 改选 
择 模 型 。 重 新 加 载 页 面 可 以 通过 典型 的 操作 系统 多 选手 势 比如 Shift-click 或 者 Ctrl-click 
来 选择 多 个 数据 项 。 

创建 第 一 个 网 格 面板 简直 太 容易 了 , 不 是 吗 ? 显而易见 的 是 , 除了 显示 数据 和 排序 ， 网 格 面 
板 还 有 很 多 其 他 内 容 。 像 分 页 和 为 手势 ( 比如 右 击 ) 设置 事件 处 理 程序 这 样 的 特性 是 经 常会 使 用 
的 。 这 些 高 级 的 使 用 正 是 我 们 即将 要 来 学 习 的 。 
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8.3 ”高 级 网 格 面板 构建 


前 一 节 构 建 了 一 个 使 用 静态 内 存 中 数据 的 网 格 面板 。 你 实例 化 了 支持 类 的 所 有 实例 , 这 会 帮 
助 你 来 了 解 它们 。 就 像框 架 的 很 多 其 他 组 件 一 样 ， 网 格 面板 和 它 的 支持 类 也 有 其 他 的 配置 模式 。 
在 构建 高 级 网 格 面板 的 过 程 中 ， 你 将 会 通过 几 个 支持 类 来 了 解 一 些 其 他 模式 。 


8.3.1 你 在 构建 什么 


你 将 要 构建 的 网 格 面板 会 用 到 一 些 高 级 概念 ， 第 一 个 是 使 用 数据 存储 来 查询 随机 生成 的 大 
数据 集 ， 并 给 你 使 用 分 页 工具 条 的 机 会 。 你 将 会 学 习 使 用 Templatecolumn 类 来 给 两 列 数据 创 
建 一 些 定制 的 泻 染 器 。 其 中 之 一 将 会 给 ID 列 上 色 ， 男 外 一 个 将 会 更 加 高 级 ， 它 会 连接 地 址 数据 
到 一 列 上 。 

在 构建 完成 这 个 网 格 面板 之 后 ， 你 将 会 再 重 来 一 次 设置 一 个 rowablclick 处 理 程序 。 我 们 
将 介绍 上 下 文 菜单 , 正如 网 格 面板 的 rowcontextmenu 事 件 。 如 果 你 有 螺旋 浆 帽 子 ， 就 带 上 加 把 
劲 儿 吧 ， 因 为 我 们 将 会 在 这 里 接触 到 很 多 东西 ! 


8.3.2 ”所 需 的 数据 存储 和 模型 


首先 必须 配置 支持 的 数据 存储 。 你 将 用 到 和 第 7 章节 相似 的 雇员 模型 数据 存储 定义 。 本 节 涵 
盖 这 一 内 容 ， 用 来 唤醒 你 的 记忆 。 可 以 在 examples/ch08/datastores.js 中 找到 如 下 的 代码 清单 里 的 
内 容 。 


代码 清单 8-2 ”配置 数据 模型 和 存储 


Ext .define('Employee', { 
























































extend : 'Ext.data.Model', 
idProperty : 'id', 
fields 和 和 
[aiE 3 人 De 
{name : 'departmentId', type : 'int' }, 
{name : 'dateHired', type : 'date', format : 'Y-m-d'}, 
{name : 'dateFired', type : 'date', format : 'Y-m-d'}, 
{name : 'dob', type : 'date', format : 'Y-m-d'}, 
'firstName', 
'lastName', 
tie 
'street', 
ell ea 
'state', 
A 
] 
3 
Var urlRoot = 'http://extjsinaction.com/crud.php' 


+ '?model=Employee&method="'; 


Var employeeStore = Ext.create('Ext.data.Store', { 
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model : 'Employee', 
ed 6。 为 网 格 面板 分 页 做 准备 
proxy 下 
type 入 
api 和 
create : urlRoot + 'CREATE', 
read : UrlRoot + 'READ', 
update : urlRoot + 'UPDATE', 
destroy : urlRoot + 'DESTROY' 
} 
reader : { 
type ve ON 
metaProperty : 'meta', 
root 0 
idProperty SY eb 
totalProperty : 'meta.total', 
successProperty : 'meta.sSuccess ' 
和 
writer : { 
type :SOT 
encode : true, 
writeAllFields : true, 
root “dala. 
allowSingle : true, 
batch : false, 
writeRecords : function(request, data) { 


request.jsonData = data; 
return request,; 


} 
os 
代码 清单 8-2 中 的 内 容 应 该 会 让 你 感觉 似曾相识 吧 。 不 同 点 在 于 强制 了 模型 的 数据 类 型 @， 
并 且 给 存储 配置 注入 了 pagesize 属 性 @。pagesize 属 性 使 得 与 分 页 工具 条 的 整合 变 得 容易 起 
来 ， 你 将 会 在 本 章 后 面 看 到 这 一 点 。 

在 我 们 继续 之 前 ， 请 注意 一 点 ， 正 在 用 employeestore 引 用 指向 一 个 数据 存储 的 实例 。 你 
将 会 在 配置 网 格 的 时 候 用 到 这 个 引用 。 























8.3.3 创建 列 


你 在 第 一 个 网 格 面板 中 用 到 的 列 都 很 无 趣 , 它们 不 过 是 映射 列 到 记录 的 数据 字段 上 去 。 在 这 
个 示例 中 , 你 将 会 使 用 下 面 代码 清单 所 示 的 两 个 模板 列 , 其 中 一 个 允许 使 用 地 址 数据 字段 来 构建 
复合 的 、 风 格 化 的 单元 。 模 板 列 仅仅 是 一 个 可 用 的 选择 〈 你 还 可 以 使 用 响应 、 布 尔 和 数字 列 )。 


代码 清单 8-3 ”创建 列 


var columns = [ 


{ 和 使 用 模板 列 
xtype : 'templatecolumn’', 
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header 2 
dataIndex : 'id', 
sortable : true, 
width : 50， 隐藏 ID 列 
resizable : false， 
hidden : true, 
ED : '<span style="color: #0000FF;">{id}</span>' 
站 
{ 将 I 上 D 泻 染 
Header : 'Last Name', 为 蓝 
dataIndex : 'lastName', 
sortable : true, 
hideable : false, 
width E00 
}, 
{ 
header : 'First Name', 
dataIndex : 'firstName', 
sortable : true, 
hideable : false, 
width 2 "100 
a 
header : 'Address', 
dataIndex : 'street', 


sortable : false; MT 为 地 址 设置 模板 
flex ce 
tpl : '{street}<br />{city} {state}, {zip}' 
]; . 

配置 这 些 列 和 配置 前 面 网 格 上 的 列 是 十 分 相似 的 。 即便 如 此 , 还 是 有 一 些 显而易见 的 不 同 之 
处 。 第 一 ,使 用 了 模板 列 @ 来 把 ID 列 泻 染 成 了 蓝 色 合 。 请 注意 D 列 默认 是 隐藏 的 @@。 并 且 ， 把 
Last Name 和 First Name 列 的 hideable 属 性 设置 成 了 false, 这 会 阻止 它们 通过 列 菜单 隐藏 掉 。 
你 会 在 泻 染 了 这 个 网 格 面板 之 后 看 到 这 一 点 是 如 何 起 作用 的 。 

Adadqress 列 则 有 点 特殊 : 被 禁止 排序 。 这 么 做 是 因为 是 基于 记录 中 的 其 他 数据 字段 如 city、 
state 和 zip 的 组 合 来 演 染 这 一 列 的 。 它 是 通过 地 址 模板 来 完成 这 一 操作 的 人 @。 人 允许 在 这 其 中 每 
一 列 上 做 排序 。 

现在 已 经 构建 了 一 个 列 配 置 对 象 的 数组 了 ， 让 我 们 继续 拼凑 分 页 网 格 面 板 吧 ! 


8.3.4 配置 高 级 网 格 面板 


现在 你 刚刚 了 解 了 所 有 需要 用 来 配置 分 页 网 格 面板 的 内 容 。 你 将 需要 配置 分 页 工具 条 , 这 将 
会 被 用 在 网 格 面板 底部 的 工具 条 上 ， 如 下 面 的 代码 清单 所 示 。 


代码 清单 8-4 配置 高 级 网 格 面板 


var pagingToolbar = { 
xtype : 'pagingtoolbar', 6 配置 分 页 工具 条 
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store : employeeStore, 
dock : "bettom’"s 
displayInfo : true 
J 
Var grid = Ext.create('Ext.grid.Panel', { 
0 6 创建 网 格 面板 
columns : -COLUMNS; 
store : employeeStore, 
loadMask : true, 
selType : 'rowmodel', 
singleSelect : true, 
stripeRows : true, 
dockedItems : |[ 
pagingToolbar 


] 

1} 

在 代码 清单 8-4 中 ， 使 用 XType 快 捷 地 配置 分 页 工具 条 和 网 格 面 板 。 对 于 分 页 工具 条 配置 @， 
绑 定 了 早先 配置 过 的 雇员 数据 存储 并 把 pagesize 属 性 设置 成 50。 这 人 么 做 使 得 分 页 工具 条 绑 定 到 
了 数据 存储 上 ， 并 且 使 之 得 以 控制 请 求 。pagesize 属 性 会 被 发 送 到 远 端 的 服务 器 上 作为 1imit 
属性 ， 它 会 保障 数据 存储 每 次 请 求 接受 3$0 (或 更 少 ) 条 记录 。 分 页 工具 条 会 使 用 1imit 属 性 和 服 
务 右 端 返回 的 totalcount 属 性 一 起 计算 数据 集 一 共有 和 多少“ 页 ”"。 最 后 一 个 配置 的 属性 
displayInfo， 它 指示 分 页 工具 条 去 显示 一 个 小 的 文本 块 ， 用 来 展示 当前 的 页 面 位 置 ， 以 及 还 
有 多 少 记录 可 以 通过 翻 页 获得 ( 记得 totalcount )。 我 们 将 会 在 你 泻 染 网 格 面板 的 时 候 指 出 这 
一 点 。 

然后 要 配置 一 个 网 格 面板 实例 @。 在 这 个 实例 中 ， 绑 定 了 配置 变量 columns 、 
mployeeStor 和 和 pagingToolbar。 loadMask 属 性 被 设置 成 true， 这 会 虽 示 网 格 面板 去 创建 
一 个 Ext .LoadMask 的 实例 并 把 它 绑 定 到 bwrap (body wrap ) 元 素 上 ， 该 元 素 是 一 个 最 终 会 包含 
面板 标题 栏 下 所 有 元 素 的 标签 。 这 些 元 素 包括 有 顶端 的 工具 条 内 容 体 .底部 的 工具 条 , 以 及 fpar 
(底部 按钮 页 脚 栏 ) LoadMask 类 绑 定 到 很 多 存储 器 发 布 的 事件 上 ， 存 储 器 会 根据 自身 状态 来 选 
择 显示 或 隐藏 。 比 如 说 ， 当 存储 器 实例 化 一 个 请 求 , 它 会 罩 住 bwrap 元 素 ; 而 当 请 求 完成 的 时 候 ， 
它 使 之 显示 。 

为 pagijngToolbar 的 XType 配 置 对 象 设置 dockedItems 属 性 ， 这 会 在 网 格 面板 的 底部 工具 
条 上 泻 染 一 个 带 有 配置 数据 的 分 页 工具 条 部 件 的 实例 。 

网 格 面板 现在 已 经 配置 好 了 ， 并 且 准 备 好 放 入 到 一 个 容器 中 并 泻 染 出 来 了 。 可 以 把 网 格 
面板 泻 染 到 一 个 文档 体 元 素 中 ,但 是 让 我 们 先 把 它 放 作 一 个 Ext .winaow 实 例 的 子 节 点 吧 。 
这 样 , 可 以 轻易 地 重 设 网 格 面板 的 大 小 , 并 且 看 到 像 自动 调整 Address 列 大 小 的 特性 是 怎么 工 
作 的 。 


8.3.5 ”给 网 格 面板 配置 一 个 容器 
让 我 们 给 高 级 网 格 面板 配置 一 个 容器 。 一 旦 演 染 了 容器 , 就 会 初始 化 刚刚 创建 的 查询 以 获取 


















































































































































8.3 高 级 网 格 面板 构建 163 





远 端 的 数据 存储 : 
Ext .create('ExXL.Windqow'，({ 
height : 350, 
width : 550, 
border : false, 


Layout -1 
items : grid 
}) .show(); 


employeeStore.1oad(); 


在 这 里 执行 了 两 步 操 作 。 第 一 步 是 创建 Ext .wingdow， 它 使 用 了 Fit 布 局 ， 并 且 拥 有 一 个 网 格 
面板 作为 其 唯一 的 项 。 使 用 了 方法 链 直 接 在 构造 器 调用 的 结果 上 调用 shovw 方 法 。 然 后 ， 对 
mployeeStore 执 行 10a6d 操 作 。 演 染 了 的 网 格 面板 如 图 8-4 所 示 。 从 你 的 劳动 成 果 上 可 以 看 到 ， 
网 格 面 板 在 整齐 的 一 列 上 显示 了 一 个 复合 的 地 址 字段 , 它 是 动态 规划 大 小 的 并 且 不 能 排序 , 与 此 
同时 ， 所 有 其 他 有 固定 初始 大 小 的 列 是 可 以 排序 的 。 




















混合 列 
Last Name First Name Address 
Andresen Louis 147-8927 Nonummy Ave 
Fry Gillian P.O, Box 773, 1323 Leo, Road 
Chaney Shoshana 2511 Morbi Avenue 
Gilbert Bernard Ap #618-1126 Egestas, Av. 
Santiago inarid 7522 At, St 
Clarke Quon 1561 Sem Rd. 
Barker Bert 541-7646 Pede. Rd, 
Dunn Jordan 484-4101 Sed Av. 
Wilkerson Mans 5315 Nisl, Avenue 
Gilmore Vernon P.O. Box 854, 4093 Consequat Av. 
Patrick Daria Ap #238-225 Metus St. 
Reed Scarlet P.O. Box 594, 5559 At, Road 
Mason len 3083 Ftiam St 显示 信息 
Page 1 ol2| bl 他 Displaying 1 - 50 of pi 


图 8-4 高 级 网 格 面板 的 实现 结果 


通过 Firebug 工 具 快 速 看 一 眼 第 一 个 请 求 的 通信 ， 可 以 看 到 被 送 往 服务 器 端的 参数 。 图 8-5 展 
示 了 这 些 参数 。 

















了 GET crud.php?model=Emp..ta 200 OK 


缓存 克星 
ne Headers Response Cache JSON 
dc 1359560028162 2 回调 方法 


callback Ext.data.JsonF.callbackl 


Ee limit 20 
每 页 的 记录 数 method READ 
model Employee 
page 1 


start 0 Daa 
初始 行 索引 


图 8-5 ”发 送 到 远 端 服务 器 上 的 请 求 分 页 数据 的 参数 
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我 们 刚刚 已 经 在 讨论 分 页 工具 条 的 过 程 中 说 过 了 callback、1imit 和 start 参 数 , 但 是 还 
没有 看 到 过 _gc 参 数 。_qc 参 数 被 认 作 是 “缓存 克星 ”参数 ， 它 对 于 每 个 请 求 是 唯一 的 ， 并 包含 
了 Unix epoch 格 式 的 时 间 戳 信息 (从 计算 机 时 间 , 也 就 是 1970 年 1 月 1 日 12 时 开始 的 秒 数 )。 因 为 这 
个 数值 对 于 每 一 个 请 求 是 唯一 的 ， 这 个 请 求 绕 过 代理 ， 并 且 阻 止 它 们 被 拦截 而 返回 缓存 数据 。 

还 没有 看 到 ID 列 ， 这 是 因为 把 它 配置 为 隐藏 列 。 要 启用 它 ， 可 以 使 用 列 菜单 ， 并 选 上 ID 列 ， 
如 图 8-6 所 示 。 









































Last Name Y First Name Address ID Last Name f 
Andresen 全 1 Sort Ascending 27 Nonummy Ave 1 Andresen L 
Fry 有 | SortDescending 。 773, 1323 lee， “i 2 Fry 《 
Chaney lorhi Avenue 3 Chaney - 
Gilbert gl Colunme PE 和 4 Gilbert E 
Santiago Ingrid 7522¢ [7] Address 5 Santiago 

Clarke Quon 1561 Sem Rd., 6 Clarke 《 
Barker Bert 541-76456 Pede, Rd 7 Barker E 
Dunn Jordan 484-4101 Sed Av. 8 Dunn 


Wilkerson Maris 6316 Nisl, Avenue 




















图 8-6 ”通过 列 菜单 启用 ID 列 


在 列 菜单 上 选 上 ID 列 之 后 , 就 会 看 到 它 出 现在 网 格 视图 里 面 了 。 在 这 个 菜单 中 , 还 可 以 指定 
某 一 列 被 排序 的 方向 。 看 了 列 菜单 之 后 ， 可 能 还 会 注意 到 一 件 事 情 ， 就 是 First Name 和 Last Name 
的 菜单 选项 不 见 了 。 这 是 因为 设置 了 hideable 标 志 为 false， 这 阻止 了 它们 对 应 的 菜单 项 演 染 
出 来 。 列 菜单 也 是 按照 需求 排序 列 的 很 好 途径 。 

现在 已 经 把 网 格 面 板 构 建 好 了 , 可 以 为 它 配 置 一 些 事件 处 理 程序 , 以 便 与 之 可 以 进行 更 多 的 
交互 。 在 此 之 前 ， 让 我 们 探索 一 下 使 用 分 页 工具 条 外 的 另 一 个 选择 : 缓冲 滚动 分 页 。 


8.3.6 ”缓冲 滚动 分 页 


想 要 避免 呈现 分 页 工具 条 ,而 不 必 等待 浏 览 需 检索 整个 数据 集 吗 ” 你 真 坟 运 ! Ext JS 4.1 为 网 
格 引 入 了 网 格 滚动 分 页 。 这 一 新 的 网 格 滚动 分 页 允许 Ext JS 在 场景 背后 分 页 并 在 显示 数据 之 前 检 
索 数 据 。 我 们 知道 这 听 上 去 有 点 复杂 ， 所 以 让 我 们 来 实际 地 探索 一 下 了 吧 。 

缓冲 滚动 分 页 背后 的 主体 思想 依然 是 把 大 数据 集 分 拆 到 多 个 页 面 中 。 在 这 一 系统 中 , 你 在 用 
户 滚动 到 底 或 顶 之 前 预 读 取 数据 。 比 如 ,如 果 用 户 已 经 滚动 到 接近 网 格 底部 了 ， 就 在 用 户 滚 到 底 
之 前 检索 一 定量 的 数据 。 这 样 , 就 避免 了 证 用户 在 应 用 于 服务 需 端 交互 并 泻 染 结果 的 时 候 等 待 了 。 
要 启动 这 一 方案 ， 需 要 配置 一 个 缓冲 数据 存储 ， 如 下 面 的 代码 清单 所 示 。 


代码 清单 8-5 ”支持 缓冲 的 雇员 数据 存储 
Var url = 'http://extjsinaction.com/crud.php?model=Employeeg&method=READ'; 
Var bufferedEmployeeStore = Ext.create("Ext.data.Store", { 
model : 'Employee', 
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pageSize i 50, 
buffered ;TE 确定 页 面 的 大 小 
remoteSort : true, 
sorters 3- 
0 fouetoreai ere 
Fs 
proxy co 
type oe On”; 
url 和 
reader : { 
type ee 
root "data 
idProperty Ce 
successProperty : 'meta.success', ey 读 取 查询 结果 的 总 数量 
totalProperty : 'meta.total' 


} 
PP) 


首先 需要 标识 出 页 面 的 大 小 @。 需 要 调整 这 个 大 小 以 获取 最 佳 的 后 台 服务 性 能 以 及 最 小 的 
UI 延 迟 。 把 网 络 速度 和 传输 的 字 节 数量 也 考虑 进去 。 

同时 记得 把 pbuffereaq 属 性 设置 为 true@。 这 么 做 会 启用 缓冲 ， 并 允许 缓冲 滚动 分 页 工作 。 
应 该 在 属性 上 排序 ， 这 样 可 以 在 屏幕 上 比较 容易 地 跟踪 滚动 进度 。 在 这 个 示例 中 ， 我 们 在 
LastName 上 启用 排序 功能 。 一 个 好 的 经 验 法 则 是 在 泻 染 到 网 格 面板 上 的 第 一 列 上 进行 排序 。 
最 后 , 记 住 要 从 服务 器 端 读 取 查询 结果 的 总 数量 @。 如 果 不 这 么 设置 ,数据 存储 就 不 能 够 计 
算 如 何 配置 网 格 面板 的 滚动 条 。 
寺 于 缓冲 滚动 分 页 ， 需 要 给 网 格 配置 一 个 垂直 的 滚动 条 。 要 实现 它 ， 使 用 前 面 定 义 的 列 和 
Wingdow 实 例 来 演 染 网 格 面板 ,正如 将 要 看 到 的 ,最 大 的 不 同 是 给 网 格 面板 添加 了 一 个 vertical- 


Scroller: 
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var grid = Ext.create('Ext.grid.Panel', { 
xtype bh ah 
columns : Columns, 
store : bufferedEmployeeStore, 
loadMask : true, 


verticalScroller : { 
trailingBufferZone : 10， 
leadingBufferZone : 10 
3 
区 这 


trailingBufferzone 使 得 可 以 配置 应 该 被 存在 内 存 中 的 “上 面 ” (在 离开 可 视 的 屏幕 区 域 
之 后 ， 在 用 户 向 下 滚动 之 后 ) 的 行 数 。1leadingBufferzone 使 得 配置 应 该 在 查询 之 间 被 检索 出 
来 的 行 数 。 

看 一 看 代码 给 浏览 器 带 来 的 结果 上 的 改变 。 你 也 像 我 们 一 样 被 震撼 了 吗 ? 记 住 只 有 在 合适 的 
时 候 使 用 这 一 特性 。 如 果 打 算 在 网 格 上 启用 编辑 功能 , 请 注意 多 项 目的 编辑 用 工具 条 分 页 做 起 来 
更 方便 。 网 格 上 的 静态 分 页 使 得 跟踪 用 户 交 互 更 容易 。 所 以 在 引入 很 棒 的 特性 之 前 要 仔细 地 计划 
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= Fe 
证 我 们 开始 探索 如 何 应 用 事件 处 理 程序 以 允许 用 户 与 网 格 进行 交互 。 


8.3.7 ”为 交互 应 用 事件 处 理 程序 


要 创建 基于 行 的 用 户 交 互 , 需要 绑 定 事件 处 理 程序 到 网 格 面 板 发 布 的 事件 上 去 。 这 里 你 将 会 
学 习 使 用 rowgblclick 事 件 在 侦 测 到 行 上 的 双击 事件 时 展示 对 话 框 。 同 样 地 ， 将 使 用 鼠标 坐标 
来 监听 一 个 contextmenu ( 右 击 ) 事件 ， ew 

将 从 创建 一 个 方法 用 来 格式 化 Ext JS 警 告 信息 框 里 面 的 信息 开始 ， 然 后 继续 创建 一 个 特定 的 
事件 处 理 程 序 ， 如 下 面 的 代码 清单 所 示 。 ee 


代码 清单 8-6 ”为 数据 网 格 创建 事件 处 理 程序 


var doMsgBoxAlert = function() { 
var record grid.selModel. 0 显示 警示 信息 
var firstName record.get ('firstName' 
var lastName record.get ('lastName' - 


Var msg = String.format('The record you chose:<br /> {0}, {1}', 
lastName , firstName); 
























































| 全 | | 


Ext .MessageBox.alert('', msg); 
}; 了 添加 rowdlc1lick 处 理 程 序 
var doRowDblClick = function() { 添加 项 目 内 容 
doMsgBoxAlert (); 菜单 处 理 程 序 
hb 
Var doRowCtxMenu = function(view, record, item, index, e) { 
e.stopEvent (); 
if (!view.rowCtxMenu) { 6 隐藏 浏览 器 内 容 菜单 
View.rowCtxMenu = Ext.create('Ext.menu.Menu', { 
items : { 
text : 'View Record', 
handler : function() { 创建 静态 菜单 实例 
doMsgBoxAlert (); 


} 


有 
} 
View.rowCtxMenu.showAt (evtObj .getXY()); 
3 


在 代码 清单 8-6 中 ,创建 了 三 个 方法 。 第 一 个 是 doMsgBoxAlert@, 它 是 指示 网 格 面板 生成 
事件 的 工具 类 。 它 使 用 了 selectionModel 的 getSelection 方 法 来 获取 被 选中 记录 的 引用 ,并 
使 用 record.get 方 法 来 抽取 姓 和 名 的 数据 字段 。 它 使 用 这 些 数据 字段 来 显示 一 个 包含 了 这 两 个 
属性 的 警告 信息 框 。 





























上 下 文 菜单 典型 选择 项 
a 
用 的 这 一 功能 ， 你 可 以 强制 选中 用 户 右 击 的 项 目 。 这 样 做 可 以 使 应 用 更 像 桌 面 应 用 。 
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接 下 来 创建 第 一 个 处 理 程序 . doRowDblclick@。 这 一 方法 的 全 部 工作 就 是 执行 我 们 刚 讨 
论 过 的 doMsgBoxAlert 方 法 。 

最 后 一 个 方法 是 doRowCtxMenu 人 @,， 它 更 加 复杂 ， 接 受 5 个 参数 。 第 一 个 是 网 格 视图 的 
第 二 个 是 数据 存储 中 被 操作 的 数据 记录 , 第 三 个 是 项 目 元 素 , 第 四 个 是 项 目的 索引 ,以 及 第 五 
是 Ext .Eventobject 的 实例 。 知 道 这 些 是 很 重要 的 ， 因 为 在 某 些 浏览 右上 ， 比 如 Mac OS 和 
Firefox， 需 要 阻止 浏览 自己 的 上 下 文 菜单 显示 出 来 。 这 就 是 为 什么 要 把 调用 e .stopEvent@ 作 
为 第 一 件 事情 。 调 用 stopEvent 阻 止 了 浏览 需 原生 的 上 下 文 菜单 显示 。 

接 下 来 , 处 理 程序 使 用 record 参 数 来 强制 选择 通过 selectionModel 的 select 方 法 选中 的 
行 。 它 是 通过 record 参 数 传人 的 。 
然后 检测 下 网 格 是否 有 rowctxMenu 属 性 ， 它 的 第 一 个 执行 是 false， 解释 器 就 是 进入 这 个 
代码 分 支 。 这 么 做 是 因为 要 在 它 不 存在 的 时 候 创 建 一 个 菜单 。 如 果 逻 辑 中 没有 这 个 分 又 ,每 次 上 
下 文 菜单 被 调用 时 就 需要 重建 菜单 ， 这 太 浪 费时 间 了 。 

然后 把 grid 上 的 rowctxMenu 属 性 @ 赋 值 为 一 个 Ext .menu .Menu 新 实例 的 结果 。 菜 单项 的 
第 一 个 属性 是 菜单 项 显示 时 展示 的 文本 内 容 。 另 一 个 内 联 定义 的 处 理 程序 方法 会 导致 
doMsgBoxAlert 在 引用 的 记录 上 被 调用 。 

最 后 一 点 代码 是 在 新 创建 的 rowctxMenu 上 调用 showat 方 法 ， 它 需要 8 坐标 和 了 难 标 来 展示 
菜单 。 通过 直接 传人 evtobj . getxY () 的 结果 给 showat 方 法 来 做 到 这 一 点 。evtobj .getXY 会 
在 事件 发 生 的 时 候 直接 返回 精确 的 坐标 信息 。 
事件 处 理 程序 现在 武装 完毕 ,并 准备 好 被 调用 了 。 在 可 以 在 网 格 中 使 用 之 前 , 需要 配置 它们 
为 监听 器 ， 如 下 所 示 : 
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listeners : { 
itemcontextmenu : doRowCtxMenu, 
itemdblclick : doMsgBoxAlert 


要 给 网 格 配 置 事件 处 理 程序 ,需要 添加 一 个 1isteners 配 置 对 象 ,并 映射 到 要 处 理 的 事件 上 。 
因为 事件 处 理 程序 只 能 处 理 一 行 记录 ， 所 以 必须 要 强制 单行 选择 。 可 以 通过 添加 rowmode1l 的 
selType, 并 把 singleSelect 设 置 为 true。 

刷新 页 面 ， 并 在 网 格 上 触发 一 些 双 击 和 右 击 事件 。 发 生 什 么 了 ? 参看 图 8-7。 

现在 双击 任何 记录 都 会 导致 Ext JS 警 告 信息 框 出 现 。 同 样 地 ， 右 击 一 行 数据 会 导致 一 个 定制 
化 的 上 下 文 菜单 出 现 。 如 果 点 击 View Record 荣 单项 ， 一 个 警告 框 就 会 出 现 。 

给 网 格 添加 用 户 交 互 就 是 这 样 的 简单 。 高 效 开 发 UI 交互 的 一 个 关键 就 是 只 在 需要 的 时 候 才 实 
例 化 并 泻 染 部 件 一 次 ,就 像 对 上 下 文 菜单 做 的 那样 。 虽 然 这 一 技巧 对 于 阻止 重复 项 很 好 用 , 但 是 
到 清除 的 时 候 就 显得 不 合格 了 。 还 记得 组 件 生命 周期 的 销毁 部 分 把 ”可 以 在 监听 器 列表 上 附加 一 
个 aestroy 处 理 程序 方法 来 在 网 格 面板 销毁 的 时 候 销 毁 上 下 文 荣 单 : 


listeners Ct 
itemdblclick : doRowDblClick, 
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itemcontextmenu : doRowCtxMenu, 
: function(grid) 


destroy 
if (grid.rowCtxMenu) { 


grid.rowCtxMenu.destroy(); 


} 


Last Name First Name Ad Last Name First Name 
Andresen Louis 147 Andresen Louls 
Fry Gillian PO Fry 

Chancy Shoshana 251 Chaney 

Gilbert Bernard Ap ilbert B 
Santiago ingrid 752 Santiago 
Go 15 arke 

Bar Show Record 5 

Dunn dy Jordan 4 ur jor 
Wilkerson Maris 63 Wilk Mar 
Gilmore Vernon Pp, Gilm Ver 
Patrick Daria Ap Patr Dar 
Reed Scarlet P.O Ree Se 
Mason 1eao MF Mas 1 








图 8-7 ”给 高 级 网 格 添加 上 下 文 菜单 处 理 程序 的 结果 





The record you chose: 
Clarke, Quon 


OK 














在 这 一 代码 片段 中 ， 内 联 添 加 了 destroy 事 件 处 理 程序 ， 而 不 是 给 它 创 建 单个 引用 方法 。 
destroy 事 件 永远 传人 发 布 事件 的 组 件 ,也 就 是 标记 的 grid。 在 这 个 方法 中 ,要 检测 rowCtxMenu 
变量 是 否 存在 。 如 果 这 个 项 存在 ， 就 要 调用 它 的 destroy 方 法 。 

上 下 文 菜单 的 清理 是 开发 人 员 经 常 容易 遗漏 的 地 方 之 一 ， 它 会 产生 大 量 多 余 的 DOM 节 点 垃 
圾 ,那样 会 消耗 大 量 内 存 ， 导 致 应 用 程序 的 性 能 在 一 段 时 间 之 后 下 降 。 如 果 给 组 件 附加 上 下 文 菜 
单 ,一 定 要 记 住 注册 destroy 事 件 处 理 程序 来 销毁 一 切 存 在 的 上 下 文 菜单 。 

这 样 你 就 拥有 它 啦 ! 现在 你 知道 了 如 何 操作 一 个 网 格 面板 。 接 下 来 我 们 要 探索 如 何 构建 一 个 
可 用 的 可 编辑 的 网 格 面板 ， 它 可 以 内 联 修改 数据 ， 就 像 在 Excel 这 样 的 桌面 电子 表格 制作 应 用 里 
面 操作 一 样 。 你 将 通过 使 用 Ext JS 4 新 引入 的 网 格 面板 编辑 搬 件 来 做 到 这 一 点 。 















































8.4 在 网 格 面板 上 编辑 数据 








在 Ext JS 早期 的 版 本 中 ， 必 须要 实现 一 个 独立 的 可 编辑 的 网 格 面板 来 允许 在 网 格 上 编辑 内 


容 。 有 了 ExtJS 4 之 后 ， 可 以 重用 已 有 的 网 格 面板 并 通过 插件 来 启用 编辑 功能 。 编 辑 插件 给 网 格 
面板 注入 了 编辑 的 能 力 ， 这 样 就 可 以 重用 网 格 的 数据 存储 来 持久 化 数据 了 。 可 以 选择 使 用 




































































RowEditing 或 者 CellEditing 捅 件 ， 这 取决 于 想 要 在 行 级 别 还 是 单元 格 级 别 启 用 编辑 功能 。 
使 用 网 格 面板 的 编辑 插件 可 以 大 大 简化 开发 过 程 , 但 是 还 是 需要 安装 事件 处 理 程序 来 对 数据 
































存储 进行 CRUD 操 作 。 我 们 将 通过 扩展 的 复杂 网 格 面板 来 探索 学 习 这 一 点 。 但 需要 一 些 改变 才能 
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使 用 RowEditing 插 件 处 理 数据 。 
已 经 很 兴奋 了 吧 ? 让 我 们 先睹为快 , 在 继续 之 前 看 看 有 了 启用 了 RowEditing 插 件 的 网 格 面板 
是 什么 样 的 (参见 图 8-8 )。 

















x 
Last Name First Name Street Address City State Zip Code 
Andresen Lovis 147-8927 Nonummy ... Cedar Falls UT 32321 
Fry Gillian P.O, Box 773, 1323 L.. Peekskill SC 69702 
Chaney Shoshana 2511 Morbi Avenue Fallon FL 87474 
Gilbert Bernard Ap #618-1126 Egest... Peabody MT 63351 
Santiago ingrid 7522 At, St. Waterloo OR vv 48335 
Clarke Quon er Cancel : CT 08912 
Barker Bert MN 50468 
Dunn Jordan 484-4101 Sed Av. Rockville VA 30691 
Wilkerson Maris 6316 Nisl, Avenue Roseville DC 99363 
Gilmore Vernon P.O, Box 864, 4093 C... "Bellevill OR 90080 
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图 8-8 先睹为快 下 你 在 本 节 将 要 构建 什么 


从 启用 编辑 插件 开始 , 这 样 便 可 以 了 解 到 实现 编辑 的 。 然 后 我 们 就 讨论 创建 UI 部 件 用 于 支持 
添加 和 删除 的 CRUD 操 作 的 方方面面 ， 以 及 如 何 从 存储 器 中 获取 修改 过 的 数据 记录 , 或 者 甚至 用 
我 们 在 前 一 章节 介绍 过 的 数据 存储 来 拒绝 修改 。 构建 一 个 不 存储 数据 的 可 编辑 网 格 面板 是 没有 用 
处 的 ， 所 以 我 们 将 趁 此 机 会 给 你 展示 一 下 如 何 编码 CRUD 操 作 。 这 将 会 是 你 到 目前 为 止 看 到 过 的 
最 复杂 的 代码 ， 我 们 将 一 步 步 地 创建 它们 。 

第 一 步 是 启用 RowEditing 插 件 ， 并 让 编辑 器 工作 起 来 。 然 后 要 回 过 头 来 逐个 地 添加 所 有 的 
CRUD 操 作 。 


8.4.1 启用 编辑 插件 


因为 要 扩展 先前 创建 好 的 复杂 网 格 面板 , 你 会 看 到 一 些 相 同 的 代码 和 模式 。 我 们 这 么 做 可 以 
让 代码 的 流程 变 得 尽 可 能 简洁 流畅 。 大 多 数 情形 下 代码 会 有 一 些 变化 , 所 以 请 花 时 间 读 每 一 个 字 。 
我 们 会 指出 所 有 相关 的 修改 。 

本 节 基 于 第 7 章 介绍 的 数据 存储 来 展开 。 你 将 会 从 下 面 的 代码 清单 开始 ， 创 建 这 个 可 编辑 网 
格 的 支持 类 的 实例 ， 如 数据 存储 、RowEditing 插 件 以 及 列 编辑 器 配置 。 


代码 清单 8-7 创建 网 格 面板 编辑 需要 的 支持 类 的 实例 
Ext .define('State', { 
extend : 'Ext.data.Model', 
fields : ['id', 'state'] 
站 












































var url = 'http://extjsinaction.com/crud.php??model=State&method=READ'; 
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Var StateStore = Ext.create("Ext.data.Store", { 
'State', 


model : 
BEOKY: Rr 
type 

url 
reader : { 

type 

root 


2 On YYy 
Pa sb 中 


SON, 
'data', 


idProperty 
successProperty : 


} 
rowEditing = 


CLIiCkSToOEdit. 2 
autoCancel : false 


textField = { 
xtype : 'textfield' 


Ext .create('Ext .grid.plugin.RowEditing', 


'id', 
"meta. SucCcess’ 


en 添加 文本 编辑 器 配置 对 象 


stateEditor = 
xtype 


{ 


: 'Combo', 


triggerAction : 
: 'state', 
"stabery 
: StateStore 


displayField 
valueField 
store 


1 


Lables 


yh 设置 组 合 框 配置 对 象 


a 创建 数据 存储 


{ 
ll 设置 新 的 RowEditing 


从 创建 用 于 修改 数据 记录 State 字 段 的 组 合 框 编辑 右 @ 的 数据 存储 @ 开 始 ， 然 后 创建 一 个 


RowEditing 的 网 格 插件 实例 @, 把 cl1icksTordit 设 置 为 2, 这 样 双击 事件 就 会 带 起 
这 和 大 多 数 用 户 交 互 的 流程 是 一 样 的 。autocance1l1 被 设置 为 false， 这 样 当 用 户 决定 编 加 
行 的 时 候 就 会 保持 更 改 。 我 们 喜欢 把 它 设置 为 false 是 因为 用 户 总 是 可 以 通过 RowEditing 捐 








置 的 取消 按钮 取消 变化 。 


接 下 来 创建 一 个 可 重 月 
一 列 上 。 最 后 声明 一 个 组 合 



























































个 编 














辑 需 ， 
叶 必 一 
上 件 内 

















现在 可 以 声明 列 并 赋值 编辑 器 了 ， 正 如 下 面 的 代码 清单 所 示 。 
代码 清单 8-8 创建 带 编 辑 器 的 列 


Var columns = 


{ 





Header 


sortable 
editor 


header 


: 'Last Name', 
dataIndex : 
: true, 

: textField 


'lastName', 


: 'First Name', 
datalIndex : 


'firstName', 


动 使 用 文本 字段 编辑 器 


的 单行 文本 框 配置 对 象 , 它 会 被 用 于 差不多 是 可 编辑 网 格 面 板 全 的 每 
E 配 置 对 象 @@。 它 会 被 用 于 网 格 面板 的 State 列 上 。 
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sortable : true, 
editor : textField 
js 
{ 
header : 'Street Address', 
dataIndex : 'street', 
flex i 
sortable : true, 
editor : textField 
Fe 
{ 
header "OTE 
dataIndex : 'city', 
sortable : true, 
editor : textField 
{ 
header :State’, 
dataIndex : 'state', 
sortable : true, 
width SO 0 指定 州 编辑 器 
editor : StateEditor 
> 
人 
header : 'Zip Code', 
dataIndex : 'zip', 
sortable : true, 
editor : textField 


} 
J 


当 复 查 columns 配 置 数组 , 会 看 到 一 些 熟悉 的 属性 , 比如 header、 2 
还 可 以 看 到 代码 块 里 面 的 一 个 新 成 员 editor@, 它 可 以 给 每 一 列 定义 特定 的 编辑 器 。 你 还 
意 到 给 State 列 定义 的 stateEditor@。 

现在 已 经 配置 好 了 存储 器 、 编 辑 器 和 列 ， 可 以 像 下 面 的 代码 清单 一 样 创建 分 页 工具 条 了 。 对 
于 这 个 任务 ， 要 重用 早先 创建 好 的 employeeStore 实 例 了 。 


代码 清单 8-9 创建 分 页 工具 条 、 网 格 面板 和 窗口 


var pagingToolbar = { 






































xtype : 'pagingtoolbar', 
store : employeeStore, 
displayInfo : true 
下 
var grid = Ext.create('Ext.grid.Panel', { 
columns : Columns, 
store : employeeStore, 
loadMask : true, 
bbar : pagingToolbar, Si 启用 RowEditing 插 件 
plugins : [ rowEditing ]， 


stripeRows : true, 
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selType : 'rowmodel', 
viewConfig : { 
forceFit : true 
} 
listeners Cet 
itemcontextmenu : doRowCtxMenu, 
destroy : function(thisGrid) { 
if (thisGrid.rowCtxMenu) { 
thisGrid.rowCtxMenu.destroy (); 
} 
. 
} 
这 
Ext .create('Ext.Window', { 
height S50 
width 5 600:; 
border : false, 
layout Ee 
items Ce has Kel 


}) .show(); 


employeeStore.1oad(); 


在 代码 清单 8-9 中 ,创建 了 网 格 面板 剩 下 的 部 分 ， 以 使 用 雇员 存储 的 分 页 工具 条 开始 。 接 下 
来 用 columns、 mployeeStor 和 pagingToolbar 创 建 了 网 格 面板 @。 

然后 创建 了 网 格 面 板 的 容器 ,也 就 是 Ext .window 的 一 个 实例 , 并 把 它 的 布局 设置 为 ' fit'。 
在 窗口 刚 实例 化 完毕 就 用 链 式 方法 调用 来 展示 它 。 

最 后 ， 调 用 employeeStore.1o0ad@ 并 传人 指定 了 参数 的 配置 对 象 到 服务 器 端 去 。 这 保障 
了 从 记录 0 开始 并 限制 返回 的 记录 数 为 50。 

所 有 这 一 步 又 需要 的 拼图 都 已 经 完成 了 。 现 在 可 以 演 染 网 格 面板 并 开始 编辑 数据 了 。 图 8-9 
展示 了 带 有 RowEditing 搬 件 的 网 格 面板 。 
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图 8-9 可 编辑 的 网 格 面板 
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可 以 看 到 泻 染 好 的 可 编辑 的 网 格 面板 、 分 页 工具 条 , 还 有 等 待 被 修改 的 数据 。 刚 开始 看 上 去 ， 
它 就 像 是 一 个 普通 的 网 格 面板 , 但 是 在 表象 下 面 它 是 一 个 等 待 被 发 掘 的 全 新 功能 。 我们 将 花 点 儿 
时 间 探 讨 一 下 该 怎么 使 用 它 。 


8.4.2 浏览 一 下 你 的 可 编辑 网 格 面板 


可 以 使 用 鼠标 或 者 键盘 动作 来 浏览 单元 格 , 并 进入 或 者 退出 编辑 模式 。 可 以 用 鼠标 来 开始 编 
辑 模式 ， 双 击 一 个 单元 格 ， 然 后 编辑 髓 就 会 显示 出 来 ， 正 如 前 面 的 图 8-8 所 示 。 然 后 可 以 修改 数 
据 ， 点 击 或 双击 男 外 一 个 单元 格 , 或 者 页 面 上 的 任何 地 方 来 让 编辑 器 消失 掉 。 重复 这 一 过 程 可 以 
更 新 任意 多 的 单元 格 。 

可 以 通过 添加 属性 clicksToEqdit 到 RowEditing 插 件 上 并 指定 一 个 整数 值 来 控制 要 点 击 多 
少 下 才 可 以 编辑 一 个 单元 格 。 一 些 应 用 允许 通过 单 击 单元 格 来 编辑 ， 如 果 想 要 这 样 的 话 ， 只 需要 
把 clicksTogait 设 置 成 1 就 可 以 了 。 

作为 命令 行 爱好 者 ， 我 们 觉得 键盘 导航 提供 了 比 鼠 标 更 强大 的 能 力 。 如 果 你 是 一 个 Excel 或 
者 类 似 的 电子 表格 应 用 程序 的 高 级 用 户 ， 就 知道 我 们 在 说 什么 了 。 要 开始 用 键盘 导航 ， 可 以 用 鼠 
标 先 聚焦 到 想 要 编辑 的 第 一 个 单元 格 上 。 这 会 立即 把 焦点 放 到 你 需要 的 地 方 去 。 可 以 用 Tab 键 ， 
或 者 Shift-Tab 组 合 键 ， 来 往 左 或 右 移 动 。 还 可 以 使 用 方向 键 来 聚焦 任意 的 单元 格 。 

要 用 键盘 进入 编辑 模式 ， 按 下 回 车 键 ， 这 会 显示 一 个 该 单元 格 的 编辑 器 。 在 编辑 模式 下 ， 可 
以 通过 按 下 Tab 键 向 右 移动 一 个 单元 格 , 或 者 Shift + Tab 组 合 键 向 左 移动 一 个 单元 格 来 编辑 相 邻 的 
单元 格 。 

要 退出 编辑 模式 ， 可 以 再 次 按 下 回 车 键 或 者 按 下 Esc 键 。 如 果 输 入 的 或 修改 的 数据 验证 正确 ， 
这 条 记录 就 会 被 修改 ， 数 据 字段 就 会 被 标记 成 脏 数据 ( 修改 过 的 )。 可 以 在 图 8-10 中 看 到 不 少 被 
修改 过 的 数据 字段 。 
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图 8-10” 带 有 编辑 右 的 网 格 面板 ， 其 中 有 脏 数 据 字段 的 标记 
当 退 出 编辑 絮 ， 有赖 于 数据 字段 是 否 有 验证 以 及 验证 的 结果 ， 数据 会 被 丢弃 。 要 检验 这 点 ， 
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编辑 邮政 编码 的 单元 格 ， 并 输入 多 于 或 少 于 5 位 整数 ， 然 后 通过 按 下 回 车 键 或 者 Esc 键 退出 编辑 
模式 。 

现在 可 以 编辑 数据 , 但 是 假如 不 保存 修改 的 话 , 编辑 是 没有 用 的 。 这 时 候 就 需要 进入 下 一 个 
构建 环节 了 : 增加 CRUD 层 。 



























































8.5 加 入 CRUD 


通过 网 格 面板 ， 服 务 器 端的 CRUD 请 求 可 以 被 自动 或 者 手动 触发 。 自 动 的 请 求 发 生 于 客户 端 
超时 的 时 候 一 个 记录 被 修改 或 者 有 修改 发 生 ， 此 时 便 会 触发 一 个 到 服务 器 的 请 求 。 要 创建 自动 的 
CRUD ， 需 要 创建 自己 的 逻辑 来 发 送 请 求 ， 也 可 以 用 前 一 章 创 建 的 雇员 存储 来 轻松 做 到 这 一 点 ， 
这 正 是 本 章 后 面 将 要 采用 的 办 法 。 


8.5.1 添加 保存 和 拒绝 逻辑 


从 创建 保存 和 拒绝 修改 方法 开始 , 它 会 被 绑 定 到 按钮 放 到 分 页 工具 条 上 , 正如 下 面 的 代码 清 
单 所 示 。 保 存 修改 和 拒绝 修改 按钮 可 以 直接 用 分 页 工具 条 来 实现 。 


代码 清单 8-10 ”重新 配置 分 页 工具 条 以 增加 保存 和 拒绝 按钮 


var pagingToolbar = { 



























































xtype : 'pagingtoolbar', 
store : employeeStore, 
pageSize :D0 


displayInfo : true, 


items ll yp 添加 间隔 符 


{ 


text : 'Save Changes', 
handler : function () { 
employeeStore.sync(); 
, } 3 保存 数据 
{ 
text : 'Reject Changes', 
handler : function () { 
employeeStore.rejectChanges () ; 
) = 拒绝 更 改 


] 
es 
在 代码 清单 8-10 中 配置 了 一 个 XType 为 pagingtoolbar 的 配置 对 象 来 放 入 items@, 你 看 到 
的 连 字 号 ( - ) 字符 串 是 Ext .Toolbar .Separator 的 缩写 ， 这 会 在 工具 条 子 项 目 之 间 放 入 一 个 
小 的 竖 条 。 这 人 么 做 是 因为 想 要 在 按钮 和 常用 的 分 页 工具 条 导航 项 目 之 间 有 一 个 分 隔 。 用 
mployeeStore 的 @sync 操 作 来 实现 保存 修改 ， 而 用 employeeStore 的 rejectchanges 操 作 
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来 实现 拒绝 修改 。 


常见 的 ] 





Ext .Toolbar .Button 实 例 生成 的 对 象 也 在 链表 之 中 ,图 8-11 显 示 了 保存 修改 和 拒绝 





修改 按钮 ,它们 设置 有 各 自 的 处 理 程序 。 正 如 从 图 中 可 以 看 到 的 , 这 两 个 按钮 被 整齐 地 放 在 了 分 


页 工具 条 的 中 间 , 通常 情况 下 这 里 应 该 是 空 的, 而 



































日 它们 被 整齐 的 按钮 分 隔 符 分 开 了 。 现 在 可 以 





开始 编辑 数据 ， 使 用 装点 过 的 分 页 工具 条 上 的 功能 了 ， 以 及 新 创建 的 CRUD 方 法 。 
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添加 分 隔 符 > 


图 8-11 





添加 了 保存 修改 和 


8.5.2 ”保存 和 拒绝 修改 


要 使 用 保存 和 拒绝 修改 按钮 , 首先 要 修改 数据 。 用 已 经 知道 的 网 格 面板 的 功能 修改 一 些 数据 ， 
然后 点 击 保存 修改 按钮 。 应 该 可 以 看 到 网 格 面板 的 元 素 遮盖 出 现 了 片刻 , 然后 在 保存 结束 之 后 消 
失 了 。 此 时 , 被 标记 成 脏 数据 的 单元 格 又 被 标记 成 干净 , 也 就 是 提交 了 。 图 8-12 显 示 了 遮盖 动作 。 


First Name 


Street Address City st Name i 









Acevedo Venus 975-4076 Accun Sa Aceved 
Aceveda Stone Ap #296-1609N Cl ed Fitr 
Acevedo Hillary Ap #70-115 Ad Bec vedo Hilie 
Acosta Lydla 2446 Ipsum Stre Hur a Lyd 
Acosta "Joans 7447 Sed Streat Sal 5 
Acasta Cadm PO. Box 830, 1( Alhs C 
Acost Minerv 997-5660 Curab New cost | 
Acosta Quyn 4301Sed St App cost au 
Adkin Cary 6587 Tincidunt £ New dkr Ca 
Agui Bliott 824-6296 UtAv Manl ir 日 
Aguire Clamentna PO Boxg20.3- R Ce 
Aguire Jamalia 
Pn Vnds 

Page[1 jol40 5 

图 8-12 





Eee 


新 按钮 
EE 绝 修改 按钮 的 网 格 面板 











当 保存 请 求 正 在 被 发 送 到 服务 器 端 时 出 现 的 加 载 遮盖 
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现在 已 经 看 到 了 执行 远 端 保存 和 修改 数据 记录 需要 什么 了 , 接 下 来 给 网 格 面板 添加 创建 和 删 
除 功能 ， 这 样 才能 完成 CRUD 操 作 。 


8.5.3 添加 创建 和 删除 功能 


当 给 保存 和 拒绝 功能 配置 UI 的 时 候 , 在 分 页 工具 条 上 添加 按钮 。 虽 然 也 可 以 用 一 样 的 方式 添 
加 创建 和 删除 功能 ， 但 是 最 好 是 使 用 上 下 文 菜单 ， 因 为 这 使 得 删除 和 添加 操作 更 顺畅 。 想 想 看 ， 
如 果 你 曾经 用 过 一 个 电子 表格 应 用 程序 , 就 会 知道 右 击 一 个 单元 格 就 会 显示 一 个 上 下 文 菜单 , 这 
其 中 就 有 插入 和 删除 的 菜单 项 。 我 们 在 这 里 将 会 采用 同样 的 范式 。 
正如 对 前 面 添加 的 功能 所 做 的 一 样 , 在 构建 和 配置 UI 组 件 之 前 首先 开发 如 下 面 代码 清单 所 示 
的 支持 方法 。 我 们 将 增加 复杂 度 。 


代码 清单 8-11 构建 删除 和 插入 记录 方法 



































Var onDelete = function() { 
var selected = grid.selModel.getSelection(); cw 添加 删除 操作 方法 
Ext .MessageBox.confirm( 
'Confirm delete', 
'Are you sure?', 
function(btn) { 
在 (Bt 二 YE jr 


grid.store.remove(selected); 
grid.store.sync(); 从 存储 中 删除 项 


1 
这 里 从 声明 用 于 删除 记录 的 onDelete 吨 数 开始 @。 通 过 选择 模型 找到 要 删除 的 记录 之 后 ， 
通过 调用 Ext .MessageBox.confirm 要 求 用 户 确 认 是 否 删除 记录 。 如 果 得 到 确认 ， 就 通过 调用 
存储 上 的 remove@@ 方 法 来 删除 选择 的 数据 记录 。 
在 部 署 delete 之 前 ， 要 添加 一 个 ijnsert 处 理 程 序 。 这 个 程序 相对 较 小 : 
Var onInsertRecord = function() { 
var selected = grid.selModel.getSelection(); 
rowEditing.cancelEdit (); 
var newEmployee = Ext.create("Employee"); 


employeeStore.insert (selected[0].index, newEmployee); 
rowEditing.startEdit (selected[0].index,0); 

















ts 
这 个 方法 的 目的 是 定位 被 右 击 的 行 索引 ， 然 后 插入 一 行 影子 记录 。 这 里 阐释 下 它 是 怎么 工 

















作 的。 





首先 通过 调用 Ext .create ("Employee") 来 创建 一 条 新 的 数据 记录 。 接 下 来 的 调用 是 

mployeeStore 的 insert 方 法 ， 它 需要 两 个 参数 。 第 一 个 参数 是 希望 插入 记录 的 索引 ， 第 二 个 

则 是 一 个 实际 记录 的 引用 。 这 模仿 了 我 们 讨论 过 的 电子 表格 程序 , 高 效 地 在 右 击 的 行 之 上 插入 一 
条 数据 记录 。 
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最 后 ,要 立即 开始 编辑 这 条 记录 。 要 通过 调用 RowEditing 插 件 的 startEdit 方 法 来 做 到 这 一 
点 ， 传 人 搬入 新 记录 的 行 ， 并 传人 0 ( 它 代表 了 第 一 列 )。 

这 就 是 创建 和 删除 需要 的 支持 方法 了 。 现在 可 以 继续 创建 上 下 文 菜单 处 理 程序 , 并 重新 配置 
网 格 来 监听 itemcontextmenu 事 件 了 ， 如 下 面 的 代码 清单 所 示 。 


代码 清单 8-12 创建 网 格 面板 的 上 下 文 菜 单 处 理 程序 














Var doRowCtxMenu = function(view, record, item, index, e) { 
e.stopEvent (); 系 加 监听 器 
if (!grid.rowCtxMenu) { 
grid.rowCtxMenu = Ext.create('Ext.menu.Menu', { 
items : [ 
{ Rs 
text : 'Insert Record' 测试 rowctxMenu 是 否 存在 
handler : onInsertRecord 
中 
{ 
text : 'Delete Record', 
handler : onDelete 
} 
] 
}); en 必 
} ey 选择 被 右 击 的 单元 格 
grid.selModel.select (ecord) ; 


grid.rowCtxMenu.showAt (e.getxY()); 

}: 
代码 清单 8-12 包 含 了 doRowCtxMenu@，, 它 是 网 格 面板 上 处 理 itemcontextmenu 事 件 的 方 
法 ， 负 责 创建 和 展示 有 插 和 人 和 删除 操作 的 上 下 文 菜单 。 下 面 说 说 它 是 怎么 工作 的 。 

doRowCtxMenu 接 受 itemcontextmenu 处 理 程序 传人 的 5 个 参数 . 
口 view 是 一 个 网 格 面板 上 触发 事件 的 视图 引用 ; 
口 record 记 录 ; 
口 item 和 index， 它 们 标识 了 被 编辑 的 记录 ; 
口 e， 它 是 Ext .Eventobject 的 一 个 实例 。 

这 个 方法 执行 的 第 一 个 功能 是 通过 调用 e. stopEvent 来 阻止 向 上 冒 泡 的 其 他 右 击 事件 ， 这 
里 是 阻止 浏览 器 显示 自身 的 上 下 文 菜单 。 如果 不 阻止 这 个 事件 冒 泡 , 就 会 看 到 浏览 器 的 上 下 文 菜 
单 履 盖 在 你 自己 的 菜单 上 面 ， 那 将 会 傻 而 无 用 。 

然后 ，daoRowctxMenu 检 验 外 网 格 面板 是 否 已 经 有 rowctxMenu 属 性 ， 然 后 创建 一 个 
Ext .menu.Menu 的 实例 , 并 把 它 的 引用 作为 rowctxMenu 属 性 存 到 网 格 面板 上 。 这 非常 高 效 地 创 
建 了 一 个 单一 菜单 ， 比 每 次 事件 触发 都 创建 一 个 新 的 Ext .menu. Menu 实 例 要 高 效 得 多 o 它 会 一 
直 存 在 直到 网 格 面板 被 销毁 ， 正 如 你 接 下 来 看 到 的 。 

传人 一 个 配置 对 象 给 Ext .menu.Menu 的 构造 器 ， 这 个 配置 对 象 有 一 个 单一 的 属性 items ， 
它 是 一 个 会 被 实例 化 成 Ext .menu.MenuItem 的 配置 对 象 的 数组 。 两 个 MenuItem 的 配置 对 象 都 
会 引用 各 自 的 处 理 程序 来 匹配 文本 项 。 
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这 个 方法 执行 的 最 后 两 个 函数 是 选择 被 右 击 的 单元 格 , 并 在 屏幕 上 正确 的 Xl7 轴 坐标 显示 上 
下 文 菜单 。 它 通过 调用 网 格 面板 行 SelectionModel 上 的 select@@ 方 法 ， 并 传人 选择 的 记录 来 
做 到 这 一 点 。 最 后 ， 在 右 击 事件 发 生 的 坐标 位 置 显示 上 下 文 菜单 。 

在 执行 自己 的 代码 之 前 , 必须 重新 配置 下 网 格 来 注册 上 下 文 菜单 处 理 程序 。 把 如 下 代码 添加 
到 网 格 配置 对 象 里 去 : 


listeners : { 
itemcontextmenu : doRowCtxMenu 





























} 
现在 已 经 有 了 开始 使 用 UI 新 特性 的 所 有 东西 了 ， 接 下 来 我 们 看 看 如 何 让 其 发 挥 作用 。 


8.5.4 使 用 创建 和 删除 


此 时 此 刻 , 已 经 开发 完成 了 插 和 人 和 删除 处 理 程序 ,并 且 它 们 随时 可 供 使 用 了 。 刚 刚 创建 完成 
了 上 下 文 菜单 处 理 程序 , 并 重新 配置 了 网 格 , 让 它 可 以 在 rowcontextmenu 事 件 被 触发 的 时 候 被 
调用 。 从 创建 和 插入 一 条 新 记录 开始 探索 ， 如 图 8-13 所 示 。 


























Last Name First Na! Last Name First 了 Last Name First Name Street Address City State Zip Code 
Andresen Louis Andresen Louis | Andresen Louis 147-8327 Nonummy ... Cedar Falls UT 32321 
Fry Gillian Fry Gilian | Fry Gillian P.O, Box 773, 1323L Peekskill sc 69702 
Chaney Shoshar Chaney Shosha . Chaney Shoshana 2511 Morbi Avenue Fallon FL 87474 
Gilhat Rernard Gilbert Bernarc | 
InsertRecord 4 Insert Record 1 Gilbert Bernand Update Pa MT 63351 
Delete Record Delete Record ee Bo > 
Home ee rm um Clarke Quon 1561 Sem Rd Stevbenville CT 08312 
Dunn Jordan Dunn Jordan | Barker Bet 541-7646 Pede, Rd Aberdeen MN 50468 
Wilkerson 484-4101 Sed Av Rockville VA 306591 
Gilmore 5316 Nisl. Avenue Rosevlle 区 99363 
Patrick P.O. Box 864, 4033 C... Belleville OR 90080 
Reed Ap #238-225 Metus ... Sharon AL 74765 
Mason P.9, Box 534, 5659 A... Seal Beach OH 73544 
Pace 1 of Page 1 of Page 1 of30 bb bl 人 SoveChanges Reject Changes Displaying 1 - 50 of 599 

















图 8-13 ”使 用 新 配置 的 插入 记录 菜单 项 来 添加 一 条 新 记录 


如 图 8-13 所 示 ， 可 以 通过 右 击 任意 的 单元 格 来 显示 上 下 文 菜单 ， 这 会 调用 aoRowctxMenu 事 
件 处 理 程序 。 选 择 这 就 发 生 了 , 然后 在 鼠标 所 在 的 坐标 位 置 显 示 一 个 定制 的 Ext JS 菜单 。 点 击 Insert 
Record 菜 单项 会 强制 调用 注册 了 的 处 理 程序 onInsertRecord。onInsertRecord 它 会 在 被 选择 
行 的 索引 位 置 插入 一 条 新 的 记录 ， 并 开始 在 第 一 列 上 进 编辑 。 太 棒 了 ! 

为 了 保存 修改 ， 需 要 更 新 新 插 人 的 数据 记录 ， 然 后 点 击 前 面 创建 的 保存 修改 按钮 。 图 8-14 展 
示 了 这 一 屏幕 。 哇 ! 仅仅 是 创建 记录 就 有 这 么 多 的 东西 。 删除 又 是 怎么 样 的 呢 ? 应 该 会 简单 点 儿 ， 
对 吧 ? 

确实 如 此 ! 在 讨论 删除 记录 的 处 理 过 程 之 前 ， 让 我 们 先 看 下 UI 是 怎么 工作 的 。 

当 右 击 记录 的 时 候 , 一 个 Ext .MessageBox 会 弹出 来 询问 是 否 确认 删除 操作 , 如 图 8-15 所 示 。 
点 击 确认 后 ， 一 个 Ajax 请 求 就 会 被 发 送 到 控制 层 去 删除 记录 了 。 




















































































































8.5 


加 入 CRUD 


179 
























x 
Last Name First Name | Last Name First Name Last Name First Name Streel Address Cty State Zip Code 
Andresen Louis Andresen Louls Andresen Louis 147-8927 Nonummy ... Cedar Falls UT 32321 
Fry Gillian Fry Gilliar Fry Gillian PO. Box773,1323L Peekskill SC 659702 
Chaney Shoshana | Chaney Shoshana | Chaney Shoshana 2511 Morbi Avenue Fallon FL 87474 
“Garaa "Jesus Garda Jasus Garcia Jesus 123 ExUSinAdion Frederick MD 21703 
Gilbert Bernard Gilbert Gilbert Bernard Ap 5#618-1126 Egest... Peabody MT 53351 
Santiago — - rid 7522 At, St, Waterloo OR 48335 
Clarke ee 1561 Sem Rd. Steubenville co 08912 
Barker Bert Bert Barker Bert 541-7646 Pede.Rd. Aberdeen MN 50468 
Dunn Jordan Jordan Dunn Jordan 484-4101 Sed Av. Rockville VA 30631 
Wilkerson Maris Maris Wilkerson Maris 6316 Nisl. Avenue Roseville DC 99363 
Gilmore Vernon Vernon Gilmore Vernon PO. Box B64, 4093C. Belleville OR 50080 
Patrick Daria Patrick Daria Patrick Daria Ap £239-225 Metus .. Sharon AL 74765 
Reed Scarlet Reed Scarlet Reed Scarlet PO, Box 594, S859 A... Seal Beads OH 79544 
Page 1 | of30 Page |1 o Page 1 of kb MH 起 Svechanges RejectChanges Displaying 1 - 50 of 599 
图 8-14 ”保存 新 插入 记录 的 UI 变动 图 
xX 
Lst Name First Name Last Name First Name Stiest hc Last Name First Name Street Address City State ZipCode 
Andresen Louis Andresen Louis 147.8927 | Andresen Louis 147-9927 Nonummy .. Cedar Falls UT 32321 
Fry Gillian Foy Gillian Fry Gillian pO, Box773, 1323L.. Peekskill sc 69702 
Chaney Shoshung Chaney Shoshana Choney Shoshang 2511 Morbi Avenue Fallon FH B7474 
Gurcla esus a x | Gilbert Bernard Ap 4518 1125 Egest... Peabody MT 53351 
Gilbert inaert Recard | Santiago ingrid 7522 At, St, Waterloo OR 48335 
Santiago Bd ry P| Mre you sure? Clarke Quon 1561 Sem Rd Stevbenville CT 08912 
Clarke vu Burker Be 541.7646 Pede. Rd, Aberdeen MN 50468 
Barker Bert mm Ho, Dunn jordan 4-4101 Sed Av. Rockville VA 30691 
Dunn Jordan ~ Wilkerson Manis 56316 Nisl, Avenue Roseville De 39363 
Wilkerson Maris Gilmore Vernon P.O0. Box 864, 4093 €... Bellevllle OR 30080 
全 Imaora ¥ ris Ap #338-225 Metis Sharon AL 74765 
Patrick Daria Scarlet PO, Box 594, S659 A Seal Beach oH 79544 
Reed Scarlet Leo 3083 Etiam St. Lavghlin ™ 65632 
page 1 | of30 b Page 1 on pz 时 Pege 1 of30 | bE 过 Savechanges RejectChanges Displaying 1 - 50 of 599 





图 8-15 


删除 一 条 记录 的 UI 工作 流 


之 所 以 如 此 是 因为 onpelete 处 理 程序 调用 了 MessageBox.confirm， 并 会 调用 onpelete 
方法 。onDelete 困 数 如 下 所 示 





Var onDelete function() { 
var selected grid.selModel.getSelection(); 
Ext .MessageBox.confirm( 
'Confirm delete', 
'Are You sure?', 
function(pbtn) { 


if (btn == 'yes') { 
grid.store.remove (selected); 
grid.store.sync(); 

} 


这 里 使 用 了 网 格 上 的 Employee Store ( 雇员 存储 ) 去 删除 一 个 选择 了 的 记录 ， 然 
操作 。 


后 进行 同步 
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你 现在 已 经 为 自己 的 第 一 个 可 编辑 网 格 面板 实现 了 所 有 的 CRUD 操 作 。 在 此 过 程 中 ,你 深入 
地 了 解 了 存储 和 记录 ， 以 及 如 何 监测 它们 的 修改 并 保存 修改 。 一 路 上 ， 你 还 有 机 会 看 到 了 Ext JS 
确认 框 发 生 的 真实 案例 。 








8.6 ”小结 


本 章 介 绍 了 不 少 关 于 网 格 面 板 以 及 在 网 格 面 板 上 使 用 数据 存储 的 知识 。 当 你 构建 第 一 个 网 格 
面板 的 时 候 , 开始 了 解 如何 使 用 数据 存储 读 取 数 据 ， 如 何 做 数据 分 页 ， 其 至 还 实践 了 一 把 缓冲 深 
动 分 页 。 你 还 在 网 格 面板 上 添加 了 网 格 交 互 操 作 , 比如 鼠标 双击 和 右 击 会 被 捕捉 到 并 使 UI 做 出 反 
馈 。 在 此 过 程 中 , 你 还 快速 了 解 了 菜单 , 并 知道 了 及 时 在 父 组 件 被 销毁 之 后 清空 菜单 项 的 重要 性 。 

最 后 , 你 首次 接触 到 了 Gria 类 , 知道 了 如 何 使 用 RowEditing 插 件 在 系统 运行 时 编辑 数据 。 你 
还 掌握 了 行 的 SelectionModel 以 及 它 的 一 部 分 方法 ， 比 如 getselection; 也 学 会 了 使 用 键盘 
和 鼠标 手势 在 网 格 面板 上 导航 ， 并 更 快 地 编辑 数据 。 

现在 , 我 们 已 经 掌握 了 显示 数据 并 与 之 交互 的 基本 知识 , 下 一 章 带 你 深入 了 解 如 何 用 图 形 显 
示 数 据 。 

























































































第 9 章 


深 入 探究 树 形 面板 








本 章 内 容 

口 剖析 树 形 面板 部 件 

口 演 染 内 存 中 的 数据 

口 使 用 远程 加 载 数 据 的 树 形 面板 
口 创建 自 定义 的 上 下 文 菜单 

口 编辑 节点 数据 





本 章 介绍 Ext JS 中 树 形 面 板 的 相关 知识 。 树 形 面板 用 来 显示 层次 化 数据 ， 与 典型 的 文件 系统 
非常 相像 。 你 将 了 解 如 何 建 立 该 部 件 的 静态 和 动态 实现 。 在 熟悉 了 该 组 件 后 ， 你 将 通过 使 用 一 个 
数据 存储 实例 和 可 动态 更 新 的 上 下 文 菜单 进行 CRUD 操 作 。 


9.1 ” 树 形 面板 理论 


要 理解 树 ， 首先 需要 理解 层次 。 层 次 是 一 种 关系 的 组 织 形式 ,在 该 形式 中 ,其 中 一 项 可 能 
于 另外 一 项 上 层 或 下 层 ， 也 可 能 两 项 居于 同一 层 。 在 简单 的 实现 里 ， 层 次 是 一 对 一 的 关系 , 但 也 
可 以 是 更 复杂 的 多 对 多 的 有 序 集合 。 层 次 存在 于 社会 、 公 司 、 军 队 、 社 交 网 络 、 教 学 和 心理 学 中 ， 
当然 也 包含 在 计算 机 科学 中 。 


9.1.1 树 形 面板 关键 词 


你 还 需要 了 解 这 些 与 层次 和 树 息息相关 的 特殊 词汇 。 特 定 的 概念 是 通过 不 同 的 名 称 来 呈现 
的 ， 因 此 我 们 要 在 深入 主题 之 前 预先 定义 这 些 专 业 术 语 。 表 9-1 给 出 了 Sencha 中 的 术语 。 


表 9-1 树 术 语 














































































































名 称 意 义 
树 形 面板 ( Tree Panel ) 个 拥有 Ext .panel .Panel 超 强 威 力 的 容器 ， 用 于 将 层次 化 数据 泻 染 成 树 形 格 式 
树 视图 ( Tree View ) 一 个 负责 泻 染 和 操作 树 的 DOM 的 组 件 
树 (Tree ) 尺 表 项 目 ( 节点 ) 的 层次 



































节点 (Node ) 层次 中 一 个 项 目 。 在 Ext JS 4 中 ， 一 个 节点 是 通过 Ext .data.NodeInterface 来 配置 的 
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( 续 ) 
名 称 意 义 
父 节 点 ( Parent ) 作为 参照 物 的 节点 所 属 的 节点 。 根 (Root ) 是 最 高 级 别 的 父 节点 
孩子 节点 ( Child ) 另 一 个 节点 的 直接 后 代 。 所 有 节点 都 是 根 节 点 的 孩子 节点 
根 (Root ) 包含 了 第 一 层 和 其 他 各 层 的 所 有 节点 (孩子 节点 )。 根 节点 只 有 一 个 
叶子 (Leaf ) 没有 孩子 节点 的 节点 
分 文 (Branch ) 直接 共享 同一 父 节 点 的 节点 集合 
深度 (Depth ) 从 该 节点 的 分 支 到 根 节点 的 距离 。 根 节点 的 直接 孩子 节点 具有 一 层 的 深度 ， 而 它们 的 直 
楼 孩子 节点 具有 两 层 的 深度 ， 依 此 类 推 


在 UI 中 , 树 这 个 词 用 来 描述 一 个 显示 层次 化 数据 的 部 件 或 控件 , 这 些 数据 通常 开始 于 同一 个 
中 心 点 ,也 就 是 根 节点 。 就 像 植物 里 面 的 树 一 样 ，UI 里 面 的 树 也 有 分 支 和 叶子 。 和 植物 中 的 树 不 
同 的 是 ， 计 算 机 领域 的 树 只 有 一 个 根 节 点 。 

在 计算 机 世界 里 ， 这 种 模式 是 无 处 不 在 的 ， 它 就 存在 于 我 们 的 眼皮 子 底下 ， 只 是 我 们 不 曾 注 
意 而 已 。 你 是 否 曾经 浏览 过 计算 机 硬盘 ? (文件 系统 的 ) 目录 结构 就 是 树 形 结构 。 它 有 一 个 根 节 
点 (Windows 中 的 盘 符 )、 分 支 (目录 ) 和 叶子 (文件 )。 树 同样 也 被 应 用 于 应 用 程序 的 用 户 界面 
上 ， 并 有 其 他 一 些 为 人 所 熟知 的 名 字 。 

在 其 他 用 户 界面 (UI) 库 中 ， 对 这 种 类 型 的 部 件 的 其 他 命名 还 包括 树 视图 、 树 UI 或 树 ， 而 在 
ExtJS 中 它 称 为 树 形 面板 。 之 所 以 称 它 为 树 形 面板 ， 这 是 因为 它 是 Panel ( 面板 ) 类 的 直接 后 代 。 
很 像 网 格 面 板 ， 它 不 被 用 来 包含 任何 子 组 件 ， 除 非 这 些 子 组 件 是 专门 为 它 设计 的 。TreePanel 
类 之 所 以 从 Panel 扩 展 而 来 ， 原 因 很 简单 : 方便 。 这 允许 你 使 用 Pane1l 的 所 有 UI 精华 ,包括 顶部 
和 底部 工具 栏 以 及 页 脚 按钮 栏 。 

树 形 面板 和 网 格 面板 共享 原型 继承 。 在 Ext JS 4 中 引入 的 令 人 期 待 的 更 新 不 仅 意味 着 树 形 面 
板 现在 更 易于 扩展 , 还 意味 着 树 形 面板 可 以 发 挥 数 据 包 ( data package ) 的 全 部 潜力: 存储 ( store )、 
读 取 器 (reader )、 代 理 (proxy ) 和 写 人 器 (writer )。 特 殊 设 计 的 类 Treestore 可 以 为 你 管理 层 
次 化 关系 ， 简 化 CRUD 操 作 。 

















































































































9.1.2 深入 根 节点 


为 了 让 树 形 面板 可 以 正常 工作 , 首先 需要 一 些 数据 。 通 过 TreeSstore 实 例 加 载 数据 , 这 会 在 
内 部 解析 关系 并 对 Modael1 实 例 应 用 所 有 与 树 相关 的 方法 , 比如 expand( 展开 )/collapse( 折合 )、 
findchild 和 getPath, 以 及 维护 树 状态 的 额外 项 ， 比如 checked、 allowDrop 和 parentId。 
这 些 魔法 会 自动 发 生 ， 通 过 Ext .data.NodeInterface 类 来 实现 。 

数据 加 载 完成 后 ， 树 形 面 板 将 一 个 面板 泻 染 为 树 的 容器 ， 并 将 其 他 的 工作 交 与 视图 来 做 。 
Ext .tree.View 负 责 每 个 节点 繁重 的 UI 输 出 工作 。 

F 面 才 是 环 手 的 部 分 。 正 如 第 1 章 中 提 及 的 那样 , 树 形 面板 和 网 格 面板 共用 相同 的 核心 逻辑 。 
乍 听 起 来 可 能 会 觉得 不 可 思议 ， 但 事实 上 这 相当 合理 。 它 们 均 存 在 于 Ext.panel.Table 和 
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Ext .view.Table 的 上 层 。 没 错 ， 树 被 封装 在 表格 中 ， 无 论 是 在 逻辑 上 还 是 在 泻 染 上 。 

一 棵 完整 的 树 代 表 一 个 表格 ， 每 个 节点 就 像 一 行 中 的 一 列 。 默 认 情况 下 ， 一 个 节点 代表 一 个 
文本 和 一 个 图 标 , 但 是 可 以 被 扩展 以 获得 更 高 级 的 用 法 。 属 于 一 个 Model 实 例 的 节点 可 以 被 赋予 
额外 的 任意 数据 。 这些 额 外 的 信息 可 以 用 来 在 核心 树 的 左 侧 或 者 右 侧 添加 新 列 , 实现 一 个 经 常 需 
要 的 TreeGrigd 功 能 。 整 个 处 理 过 程 如 图 9-1 所 示 。 
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图 9-1 树 形 面板 的 数据 流 和 泻 染 周期 


上 升 到 一 个 特定 层次 ， 一 个 泻 染 出 的 树 形 面板 将 会 共享 GridqPanel 的 CSS 属 性 ， 比 如 
x-grid-table、x-grid-row 和 x-grid-cell 等 。 但 是 树 的 其 他 附加 特性 需要 在 专用 的 样式 中 
上 明 ， 所 有 这 些 都 由 Ext .tree .View 类 来 设置 ， 该 类 从 Ext .view.Table 扩 展 而 来 。 所 以 如 果 9 
想 为 树 节 点 添加 一 个 自 定义 的 界面 外 观 ， 需 要 从 这 里 入 手 。 
现在 你 已 经 在 一 个 较 高 的 层面 对 树 形 面板 及 其 工作 机 制 有 了 了 解 , 可 以 开始 着 手 构建 将 从 内 
存 中 加 载 数据 的 树 形 面板 了 。 


9.2 “种 下 ”你 的 第 一 棵 树 


实现 一 个 和 网 格 面板 有 “亲缘 ”关系 的 树 形 面板 很 简单 。 这 里 ,将 开始 着 手 构建 一 个 将 从 内 
存 中 加 载 数 据 的 树 形 面板 , 这 会 让 你 对 不 久 前 所 学 的 知识 有 更 多 的 了 解 。 下 面 的 代码 清单 展示 了 
如 何 构 建 静态 的 树 形 面板 。 


代码 清单 9-1 构建 静态 的 树 形 面板 


Var store = Ext.create('Ext.data.TreeStore', { 2 
NOGt 3 A 


: 初始 化 时 设置 扩 
text : 'Root Node', 展 属性 为 true 
expanded : true, 





















































184 第 9 章 深入 探究 树 形 面板 
chiTdrern re 
{ 
btext "OniLd 1 
leaf : true 
i 
{ 
BEXEt Child 2 
leaf 
} 
{ 
text 
children : |[ 
{ 
text 
children : [ 
{ 
text : 
leaf 


} 
本 


EXt .Create('Ext.window.Windqow' ，({ 





title 'Our first tree', 

layout 人 

autoShow tee 

height > E80.; 

width yr 2 208 

items J 
xtype 'treepanel', 
border : false, 
store : store, 
rootVisible : true 


} 
}); 


Node 对 象 有 一 个 text 

















属性 。 


'Grand... 
: true 


这 个 属性 非常 重要 ， 因 为 Lext 属 怕 
节点 标签 (label ) 的 。 在 书写 服务 器 端 代 码 来 支持 这 个 部 件 的 时 候 ， 请 一 定 注意 该 


本 可 
号 定 日 站 占 
Ye ee 2 指定 叶子 节点 


'Grand Child 1', 


you get the point', 


二 旦 配置 树 形 面板 











有 设置 它 ， 节 点 可 能 会 显示 在 树 形 面板 上 ， 但 不 会 有 标签 。 
还 会 看 到 了 一 个 expandeqd 属 性 人 @@,， 它 被 设置 为 true。 这 项 设置 会 保证 在 泻 染 时 该 节点 被 立 





即 展开 , 并 显示 内 容 。 在 这 里 设置 它 , 就 可 以 在 树 形 面板 泻 染 后 立 诡 
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代码 清单 9-1 中 的 绝 大 多 数 代 码 都 是 支撑 该 树 形 面 板 的 数据 。 浏 览 下 根 节点 @， 会 看 到 Root 
属性 正 是 Ext .view.Tree 用 来 显示 





性 。 如 果 没 














参数 是 可 选 的 ， 如 果 不 设置 该 参数 ， 节 点 会 被 默认 演 染 为 折 苹 状态 。 


Root Node 对 象 介 被 赋 子 children 属 性 ， 这 是 一 个 对 象 数 组 。 请 注意 1 
FE， 并 在 子 数据 ( child data ) 有 效 时 及 时 解析 它们 。 当 一 个 


NodeInterface 会 关注 chilgren 属 怕 
































I 看 到 根 节 点 的 孩子 节点 。 该 


Ext .data. 
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节点 有 chilaqren 数 组 时 ， 数 组 中 的 所 有 对 象 会 被 转换 为 记录 (Model ) 并 填充 到 父 节 点 的 
childNodqes 数 组 中 。 容 器 体系 中 也 有 类 似 的 范式 ， 其 中 子 内 容 会 被 放 在 容器 项 目的 
MixedCollection 中 。 

如 果 浏 览 了 Root Node 对 象 的 chilaren， 就 会 发 现 第 一 个 和 第 二 个 孩子 节点 并 没有 
children 属 性 ， 但 是 有 一 个 被 设置 为 Lrue 的 leaf 属 性 @。 把 一 个 节点 的 leaf 属 性 设置 为 
true 后 ,该 节点 将 不 包含 任何 子 节点 ， 这 使 它 成 为 一 个 叶子 节点 而 非 分 支 。 在 这 个 例子 中 ， 
child1 和 chi192 都 是 叶子 节点 ， 而 chi193 则 是 一 个 分 支 ， 因 为 它 并 没有 一 个 被 设置 为 Lrue 
的 leaf 属 性 。 

节点 "chil1d3 ' 包 含 一 个 子 节 点 。 该 节点 只 有 一 个 子 节 点 ,而 这 个 子 节 点 也 只 有 一 个 子 节 点 。 
最 后 一 个 子 节 点 是 一 个 叶子 节点 ， 因 为 它 的 1eaf 属 性 被 设置 为 true。 

在 配置 了 支持 数据 后 ， 接 着 使 用 XType 全 配置 对 象 来 配置 树 形 面板 。 在 这 里 会 看 到 这 个 部 件 
的 配置 是 多 么 简单 自然 。 除 了 用 来 配置 根 节点 的 root 外 ， 其 他 所 有 属性 都 应 该 很 容易 理解 。 在 
这 个 例子 中 ， 根 节点 JSON 最 上 层 的 对 象 会 被 看 作 树 形 面板 的 根 。 

可 以 通过 为 节点 的 配置 对 象 添 加 icon 或 者 iconcls 属 性 来 修改 节点 的 图 标 ， 其 中 icon 指 定 
一 张 图 像 的 直接 路 径 ， 而 iconcls 是 一 个 CSS 类 的 名 字 ， 这 个 类 用 于 指定 图 标 样式 。 节 点 的 
iconcls 属 性 和 面板 的 iconcls 配 置 对 象 作用 很 相似 ， 我 们 更 倾向 于 使 用 它们 来 更 改 图 标 。 

最 后 , 代码 清单 中 的 代码 创建 一 个 Ext .window .Window 实 例 来 显示 树 形 面板 。 图 9-2 展 示 了 
演 染 之 后 的 树 形 面板 。 

























































































Ourfirst tree X Ourfirst tree Xx 
BRoot Node 司 chid1 
司 Cnild1 司 Child2 
司 Child2 日 名 Child 3 
名 Child 3 日 局 Grand Child 1 
日 局 Grand Child 1 司 Grand... you get the point 





司 Grand... you get the point 





图 9-2 第 一 个 (展开 的 ) 树 形 面板 : 根 节点 可 见 〈 左 ) ， 根 节点 隐藏 ( 右 ) 
在 树 形 面板 被 泻 染 之 后 ， 可 以 看 到 在 JSON 中 安排 的 那些 节点 就 像 设 置 的 那样 显示 出 来 了 。 
可 以 展开 'child3 ' 节 点 和 它 的 子 节点 来 显示 其 他 层级 的 节点 。 通 过 点 击 一 个 节点 ， 你 很 容易 使 
用 选择 模型 。 如 果 想 隐藏 根 节点 ， 可 以 将 TreePanel 配 置 对 象 中 的 rootVisible 属 性 设置 为 
false。 在 图 9-2 ( 右 ) 中 可 以 看 到 修改 之 后 的 结果 。 
现在 有 了 它 , 一 个 静态 的 树 形 面 板 。 很 简单 吧 ? 现在 , 我 们 继续 来 创建 一 个 远程 树 形 面板 吧 。 


9.3 ”培育 动态 树 形 面 板 
因为 第 一 个 树 形 面板 是 静态 的 , 所 以 无 需 创建 带 有 代理 和 读 取 器 的 完整 的 存储 实例 。 远程 加 
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在 第 7 章 ， 曾 经 使 用 一 些 数据 在 网 格 面板 中 显示 人 员 身 份 信息 ， 现 在 
属于 不 


载 的 树 形 面板 改变 了 这 些 。 
将 使 用 相同 的 数据 来 开发 一 个 树 形 面板 。 这 些 人 都 是 My Company 公 司 的 雇员 ， 不 过 分 别 
同 的 部 门 。 
9.3.1 创建 一 个 远程 加 载 面 板 

接 下 来 的 代码 清单 显示 了 怎样 配置 一 个 树 形 面板 ， 来 使 用 服务 器 端 组 件 列举 每 个 部 门 的 
员 。 


代码 清单 9-2 构建 动态 的 树 形 面板 


Var store = Ext.create('Ext.data.TreeStore', { 























釉 





2 自动 同步 数据 


autoSync: true, 
proxy 2 
type : 'jsonp', 
Url : 'http://extjsinaction.com/treeData.php' 
J 远程 数据 URL 
root { 
text : 'My Company', 6 配置 内 联 根 节点 
id : 'mycompany', 
expanded : true 
es 设置 根 节点 ID 
Ext .create('Ext.window.Window',t{ 


title : 'Our first remote tree', 
layout Cs 
autoShow : true, 
height ?360., 
width :2.80 
items 2 
xtype : 'treepanel', 
store : store 


} 
ye 


就 像 在 代码 清单 9-2 中 看 到 的 那样 ， 要 让 存储 知道 ， 一 旦 有 更 改 发 生 ， 它 需要 负责 同步 数据 
@, 然后 配置 了 一 个 Ext .data.proxy@, 在 本 例 中 它 是 一 个 JsonP 的 代理 , 这 个 代理 的 url 属 性 
被 设置 为 LreeData .php， 该 页 面 被 托管 于 http://extjsinaction.com。 当 需要 配置 自己 的 树 形 面板 
时 ， 如 果 控 制 器 和 该 文件 拥有 同样 的 域 信息 ， 可 以 使 用 自己 选择 的 控制 器 蔡 换 掉 该 PHP 文 件 ， 并 



































把 代理 的 类 型 改 为 Ajax。 在 开始 编码 控制 











1 器 之 前 ,我 们 先 来 了 解 下 请 求 与 响应 的 周期 ,在 我 们 看 











完 这 个 树 形 面板 泻 染 出 的 版 本 后 很 快 会 





到 该 点 。 








配置 树 形 面板 的 下 一 步 是 配置 内 联 的 根 节 点 合 。 注意 ， 


节点 额外 的 ia 属性 合十 分 重要 。 就 像 








之 后 会 看 到 的 ， 该 属性 将 用 来 从 服务 器 请 求 子 数 据 ( child data )。 还 有 一 点 要 注意 , 将 expanded 
设置 成 true。 这 样 做 可 以 保证 一 旦 完成 泻 染 ， 树 形 面板 就 会 展开 并 加 载 子 节点 。 

有 趣 的 是 ， 在 Ext .data.TreeStore 中 根 节 点 的 配置 并 不 是 必须 的 。 如 果 选 择 不 去 配置 该 
项 ， 请 确保 在 最 初 的 数据 加 载 中 包含 它 。 这 一 特性 在 很 多 特定 配置 上 都 很 有 用 。 
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最 后 ， 配 置 了 一 个 更 大 的 容器 窗口 (Ext .Window ) 来 包含 树 形 面板 。 将 这 个 示例 的 窗口 配 
置 得 更 大 不 但 可 以 增加 树 形 面板 的 视图 空间 ， 还 能 消除 对 Ext .util .Format .ellipsis 方 法 的 
潜在 调用 ， 因 为 命名 过 长 。 

在 演 染 完 树 形 面板 后 ， 看 到 根 节点 (My Company ) 被 立刻 加 载 ， 并 列 出 了 My Company 
中 所 有 的 部 门 ， 就 像 图 9-3 ( 左 ) 显示 的 那样 。 想 要 查看 茶 个 特定 部 门 的 员工 ， 可 以 点 击 展开 
图 标 (+ ) 或 者 双击 标签 ， 然 后 就 会 看 到 远程 加 载 提 示 符 显示 在 文件 夹 图 标的 位 置 ， 就 像 图 9-3 
(中 ) 显示 的 那样 。 一 旦 员工 节点 被 成 功 加 载 ， 它 们 就 会 显示 在 部 门 节点 下 ， 就 像 图 9-3〈 右 ) 
显示 的 那样 。 























Durfirst remote tree Durfirst remote tree Our first remote tree x 
日 名 My Company 日 匀 My Company My Company 
习 []Accounting 用 二 Accounting 局 人 梧 Accourting | 
白 - Advenising 了 Adverising 从 国 Salinas, Erin | 
由 [Asset Management 由 [Asset Management 司 Morales, Lillith ' 
由 [Cusiomer Relations DCustomer Relations 司 Avery, Amity | 
由 [Customer Service [Customer Service 图 Ryan, Gareth | 
田 回 Finances 由 问 ] Finances 司 Branch, Thaddeus 
习 LJHuman Resources J Human Resources = Kelly, Tyrone 
由 [LILegal Department 由 [Legal Department 司 Cooley Francesca 
dL Media Relations HL Media Relations 国 Reily, Cherokee 
HD Payroll 田 辐 Payroll 司 cooke, Colton 
由 L JPublic Relations SF ee 司 Pennington, Alea 
LQuality Assurance HL |Quality Assurance 国 Stephens, Edward 
HResearch and Developme 由 Research and Developn 司 Greene, zahir 二 
由 LJSales and Marketing 由 LSales and Marketing 图 Vaughn, Thane 于 























图 9-3 ”远程 树 形 面板 显示 了 它 远程 加 载 数据 的 能 
我 们 快速 地 浏览 了 这 个 示例 ,现在 稍微 回顾 一 下 ， 了 解 下 请 求 是 如 何 发 出 的 。 我 们 会 讨论 服 9 
务 器 端 控制 器 是 如 何 支持 这 个 树 形 面板 的 。 
9.3.2 ”为 树 〈 树 形 面 板 ) “施肥 ” 


为 了 使 用 树 形 面板 来 分 析 客 户 端 /服务 器 端 交互 模型 ， 让 我 们 从 根 节点 自动 展开 而 触发 的 加 
载 请 求 开 始 ， 如 图 9-4 所 示 。 记 住 将 根 节 点 的 expanded 属 性 设置 为 Lrue， 演 染 的 时 候 这 个 节点 
就 会 被 展开 ， 而 如 果子 节点 已 经 在 内 存 中 就 会 泻 染 子 节 点 ， 否 则 就 触发 一 个 加 载 请 求 。 




















Vv POST http:/ /ext2play/extia/chapter09/getCompany.php 200 OK 170ms 


Headers Post Response 


node myCompany 





图 9-4 ”初始 节点 请 求 的 POST 参数 


就 像 看 到 的 那样 ， 发 给 getCompany.php 控 制 器 的 第 一 个 请 求 是 由 单个 参数 node ( 节点 ) 构成 
的 , 并 且 参 数值 为 aycompany。 还 记得 你 在 哪儿 设置 了 该 值 , 将 该 值 设置 给 了 哪个 属性 吗 ? 如果 
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你 说 是 “ 根 节 点 的 1q 属 1 
属性 来 传递 子 数据 入 控制 器 。 








， 那 就 对 了 ! 当 一 个 异步 加 载 节点 被 首次 展开 时 ， 存 储 将 使 用 它 的 ia 


控制 器 会 接受 这 个 参数 并 查询 数据 库 , 来 获取 与 该 ia 值 相关 的 所 有 节点 , 然后 返回 一 个 对 人 


列表 ， 就 像 图 9-5 中 演 





有 示 的 那样 。 在 这 个 图 中 你 可 以 看 到 一 
节点 的 1abel 属 性 。 注 意 部 门 数 据 中 并 不 


个 对 象 都 包含 tcext 属 性 和 id 属 性 。text 属 性 会 被 赋 给 








个 用 来 定义 多 个 部 门 的 数组 对 象 。 





他 和合 lea 


参数 。 


指向 getCompany.php 的 请 求 会 被 触发 ， 
看 下 控制 器 请 求 的 返回 结果 ， 





属性 和 childqren 属 性 。 它 们 是 叶子 节点 还 























不是 分 文 节 点 ? 


¥ GET treeData.php? dec=1.taJsc 200 OK extjsinaction.com 


Params Headers Response Cache HTML 

Ext .data.JsonP.call lback1( [{"id":"1", We 1"Accounti 人 :numErployees": 
:"2","name"s: "Advertising" 9 es Oyees":"30", "text":"Advertising"},{"i 
:numEmployees":"35","text": "Asset Management }, {"id" "4", "name”:"Custol 
:"28","text"”: "Customer Rolations"}, {has™, "name": "Cuatoner Su 
Service"},{"id":"6", "name": Finances ’ Ra "33" :text":"Pina 
Resources"," 和 ja 6” "text” 
:"38","text"”:"Legal Department"},{"id":"9"," 
Relations"}, {"id":"10","name" 





"Media helations" “nu 
"payroll" 7 "MunEmployees":"35", "text"! "Pe, 
Relations", ee : "31", "text":"Pubiic Relations"},{"id";:"12","; 
1"39","text”; “Quality Assurance”},{"id";"14", "name":;"Research and Devel 
:"Research and Development"},{"id”:;"13","name":"Sales and Marketing"，"n' 
and Marketing"},{"id":"15", "name"”:"Tech Support"”, "numEmployees":"38"," 








图 9-5 初始 请 求 getCompany.php 控 制 器 的 结果 





它们 是 分 支 节点 。 因 为 这 两 个 属性 都 没有 被 定义 ,它们 会 被 看 作 分 支 节点 。 这 意味 着 当 它们 
被 初次 展开 时 ，mTreestore 会 调用 一 个 Ajax.reduest 请 求 ， 并 传递 该 部 门 的 ID 属性 作为 nodae 


使 用 刚才 已 


控制 器 将 接受 i 
经 学 到 的 知识 ， 现 在 可 以 很 安全 地 去 预言 ， 当 展开 Accounting 部 门 节点 时 ， 
它 的 唯一 参数 noge 被 赋值 为 'Accounting'。 让 我 们 快速 


该 node 参 数 并 返回 一 个 该 部 门 所 有 雇员 的 列表 。 





它 如 图 9-6 所 示 。 


¥ GET treeData.php? dc=1..taJ: 0 OK extjsinaction.com 5.7 


Params Headers _ Response Cache HTML 

Ext .data.JsonP.calilback2([{"id":;"emplioyee-24", "firstName"; "Sawyer", "lastNam 
, "title":"Mrs.","street"”:"Ap #880-4070 Faucibus St。 city"”: "Peru","state”™:’' 
1"1", "dateHired":"08\/14\/2005", "daterired" ;nulil,"dGob":;"04\/16\/1983", "xate’ 
: "homePhone": "498-430-3331"”, "mobiilePhone":"698-130-3775", "email": "Phasellus, 
itrue, "text"; "Kemp,Sawyer", "name";"Kemp,Sawyer"},{"id";"employee-28", "first}l 
Bamiliton "middle":"Nash"”, "title":"Mrs.", "street":"P.0. Box 889, 4804 Vel: 
"81062", "departmentId":"1","dateHired"”:"09\/18\/2001","¢ 


,"state":"ID","zip”: 
“764-942-8728", “homePhone”:"399-620-5¢ 


\/29\/1942","rate":"74", "officePhone": 
, "email":;"enimaugueporttitor.org"”, "leaf":true, "text";"Hamilton,Skyler", "nar 
:"employee-34", "firstName":"Shelly","lastName":"Levy", "middle":"John”, "titl¢ 

Rd.","city": "Fitchburg", "state": "NE","zip"”:"15919", "departmentid"”:"]1","dat¢ 
:null, "dob":"07\/26\/1972", "rate":"67", "officePhone": "432-162-9403", "homePhec 
1"551-193-6220", "email":"mauris.eratéCras.edu","leaf":true, "text":"Levy,She; 
},{"id": "employee-41", "firstName":"O0leg","lastName":"Alford","middle": "Oren’ 

Euismod Rd.","city":"Mesdquite", state”:"FL","zip":"22275", "dGepartment1d":"; 
,dateFired":null, "dob":"02\/07\/1945","rate":"24","officePhone”:"177-259-7: 
,mobiiePhone”:"313-772-8486", "email"”; "perleveuismodac.ca","leaf":true,"text 
a },{"id":"employee-52", "firstName":"Forrest"”, "lastName":"Peterson", "mi¢ 
“P.O0. Box a 5874 vonnmotitime. Rd.”, "city":"Oshkosh","state”: "SD", "zip": 
"dateHired" 5\/16\/1981", "rate"”:"4¢ 
“homeblione"s : ei +: mobilePhone": Es ", "email”;"Crasletpec 
rr Forrest”, "name":"Peterson,PForrest"},{"id": "employee-58", "firstNar 
"middie” ee ’ “title": "”, "street";"Ap #288-4247 Nassa. St.", "city": "Bo 
"dopartmentId": "dateHired":"07\/15\/2007", "date?ired":null,"dob™: "11\/; 
"197-550-2538"， 6 "267-701-1670", "mobilePhone":"797-814-3265", "em 


图 9-6 来自 Accouting 部 门 节 点 请 求 的 结果 


“12\/09\/2002", "dateFired”:null, "dob":"0 








一 个 
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查看 JSON 结 果 , 会 看 到 返回 的 一 个 对 象 列表 , 每 个 对 象 都 包含 ia、text 和 1eaf 属 性 。 记 住 ， 
为 1eaf 属 性 被 设置 了 ， 所 以 这 些 节 点 都 是 不 可 再 展开 的 叶子 节点 。 

茶 喜 你 ! 你 已 经 成 功 地 构建 了 能 显示 层次 化 数据 的 静态 和 动态 树 形 面 板 。 你 对 树 形 面板 和 提 
供 树 形 面板 数据 的 Web 服 务 之 间 的 客户 端 /服务 器 端 交 互 模型 也 有 了 一 个 基本 的 了 解 。 

如 果 致 力 于 为 这 种 类 型 的 部 件 构建 一 个 提供 CRUD 功 能 的 UL, 那么 配置 一 个 树 形 面板 来 加 载 
数据 只 是 其 中 的 一 小 部 分 工作 。 接 下 来 ， 我 们 看 看 怎样 构建 一 个 包含 这 些 交 互 能 力 的 树 形 面板 。 


9.4 在 树 形 面板 上 实现 CRUD 


为 了 配置 包含 CRUD 功 能 的 用 户 界面 ， 需 要 添加 更 多 的 代码 进去 。 毕 竟 ， 树 形 面板 并 没有 原 
生地 提供 这 些 特性 。 这 些 就 是 你 接 下 来 要 做 的 。 

为 了 激活 CRUD 功 能 ， 需 要 修改 树 形 面板 ， 为 它 添加 itemcontextmenu 监 听 器 ， 该 监听 需 
会 调用 一 个 方法 来 选择 你 右 击 的 节点 ， 并 创建 一 个 Ext .menu.Menu 实 例 且 将 其 显示 在 鼠标 右 击 
的 坐标 处 。 这 一 处 理 过 程 非常 像 在 前 一 章 中 为 网 格 面板 添加 上 下 文 菜单 处 理 程序 的 过 程 。 

将 创建 三 个 菜单 项 : 添加 、 编 辑 、 删 除 。 因 为 只 能 添加 雇员 到 一 个 部 门 中 ,所 以 将 根据 点 击 
的 节点 的 类 型 来 ( 根 节点 , 分 支 节 点 或 是 叶子 节点 ) 动态 地 更 改革 单项 文本 ,启用 或 禁用 该 菜单 
中 一 些 项 。 

每 个 处 理 程序 都 将 调用 存储 中 合适 的 CRUD APT 方 法 来 为 每 个 CRUD 动 作 模拟 控制 器 。 因 为 
存储 自动 完成 了 CRUD 中 的 大 多 数 工作 ， 全 部 的 数据 创建 和 销毁 处 理 过 程 和 书 中 之 前 的 例子 很 
相似 。 

请 准备 好 ,这 将 是 目前 为 止 最 复杂 的 树 代码 。 首 先 , 我 们 要 创建 上 下 文 菜单 处 理 程序 和 上 下 
文 菜单 工厂 方法 。 


9.4.1 显示 上 下 文 菜单 


为 了 添加 一 个 上 下 文 菜单 到 树 形 面板 中 ， 必 须 为 itemcontextmenu 事 件 注册 一 个 监听 器 。 
这 一 操作 十 分 简单 : 在 代码 清单 9-2 中 ， 添 加 一 个 1isteners 配 置 选项 到 window 创 建 代码 里 的 
items 配 置 项 下 方 ， 如 下 所 示 : 

























































































listeners 六 
itemcontextmenu : onCtxMenu 


} 


添加 这 部 分 代码 将 会 保证 在 itemcontextmenu (或 者 右键 点 击 ) 事件 被 触发 时 onctxMenu 处 理 
程序 会 被 调用 。 

酷 ! 现在 树 形 面板 已 经 设置 好 可 以 调用 onctxMenu 处 理 程序 了 。 在 进行 编码 前 , 应 该 先 构 建 
一 个 工厂 方法 来 生成 一 个 Ext .menu .Menu 实 例 ， 这 将 大 大 简化 onctxMenu。 当 使 用 工厂 方法 完 
成 它 的 时 候 , 将 会 更 好 地 理解 这 句 话 的 含义 。 下面 的 代码 清单 会 让 你 了 解 如 何 构 建 上 下 文 菜 单 的 
工厂 方法 。 












































190 第 9 章 深入 探究 树 形 面板 





代码 清单 9-3 配置 一 个 上 下 文 菜单 的 工厂 方法 


Var onConfirmDelete Ext .emptyFn; 





var onDelete = Ext.emptyFn; 
var onEdit = Ext.emptyFn; 
Var onAdd = Ext.emptyFn; 
var buildCtxMenu = function() { 
return Ext.create('Ext.menu.Menu',{ 
items: [ 
{ 
itemId : 'add', 


handler : onAdd 


itemId : 'edit', 
handler : onEdit 


itemId : 'delete', 
handler : onDelete 


这 

} 

在 代码 清单 9-3 中 首先 设置 了 一 些 占 位 方法 来 指向 Ext .emptyFn， 这 与 实例 化 一 个 函数 的 新 
实例 并 无 两 样 ， 只 是 看 上 去 简单 了 许多 。 现 在 添加 了 这 些 占 位 方法 ,以 后 你 想 再 来 填充 这 些 方法 
的 时 候 ， 会 清楚 地 知道 在 什么 地 方 操作 。 

接 下 来 ， 生成 了 buildctxMenu 工 厂 方法 ， 该 方法 会 返回 一 个 Ext .menu .M nu 实例 ， 上 县 做 
被 接 下 来 生成 的 onctxMenu 处 理 程序 使 用 。 以 防 之 前 并 未 见 过 或 者 听 说 过 工厂 方法 , 我 们 需要 提 
示 一 下 : 其 实 ， 从 一 个 更 高 的 层次 来 看 ， 它 构造 ( 因此 名 字 里 有 个 工厂 ) 了 一 些 东 西 并 返回 它 构 
造 的 东西 ， 这 就 是 它 的 全 部 内 容 。 

注意 ， 没 有 一 个 菜单 项 包含 Lext 属 性 , 但 是 它们 均 指 定 了 itemId。 这 是 因为 onCtxMenu 会 
动态 地 为 每 个 菜单 项 设置 Lext 属 性 来 给 出 用 户 提示 : 哪些 事情 是 被 允许 的 ， 哪 些 是 不 被 允许 的 。 
itemId 属 性 会 被 用 来 在 菜单 项 的 Mixedcollection 实 例 中 定位 具体 的 菜单 项 。 

itemId 这 个 配置 属性 和 组 件 的 id 属性 非常 相似 ， 只 是 它 对 组 件 的 子 容 器 来 说 是 本 地 属性 。 
这 意味 着 与 组 件 的 i1d 属 性 不 同 ，itemIgd 属 性 并 不 会 被 注册 给 componentMgr。 也 就 是 说 ， 只 有 
父 组 件 有 能 力 查 看 自己 项 目的 Mixedcollection, 从 而 找到 拥有 某 个 特定 itemIgd 的 子 组 件 。 男 
外 ， 我 们 还 可 以 在 Ext.componentouery 中 为 某 些 id 或 itemId 添 加 前 缀 # ， 例 如 
#myComponent ， 然 后 执行 这 个 查询 很 容易 就 能 定位 到 相应 的 组 件 。 

现在 每 个 MenuItenm 都 包含 一 个 指向 占 位 函数 Ext .emptyFn 的 硬 编码 处 理 程序 (作为 占 位 方 
法 )， 这 样 不 用 编写 任何 的 真实 处 理 程 序 ， 就 可 以 看 到 自己 的 菜单 显示 在 用 户 界面 上 。 在 开发 了 
onCtxMenu 处 理 程序 并 回顾 了 这 个 过 程 之 后 , 将 会 继续 为 每 个 菜单 项 建立 处 理 程 序 。 onctxMenu 
处 理 程序 如 代码 清单 9-4 所 示 。 
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代码 清单 9-4 配置 一 个 上 下 文 菜单 的 工 广 方法 

Var onCtxMenu = function(view， 
View.select (record); 
evtObj.stopEvent () ; 








record, element, index, evtObj) { 


if (! this.ctxMenu) { 
this.ctxMenu = builgdCtxMenu (); 
} 添加 工厂 方法 
this.ctxMenu.treeNode = record; 
this.ctxMenu.treeView = view; 
var ctxMenu = this.ctxMenu; 
var addItem = ctxMenu.getComponent ('add'); 
var editItem = ctxMenu.getComponent ('edit'); 
Var deletelItem = ctxMenu.getComponent ('delete'); 
赤 昌 配置 节点 的 各 种 类 型 
if (record.getId() =='mycompany') { 
addItem.setText ('Add Department'); 
editItem.setText ('Nope, not changing the name'); 
deleteIlItem.setText ('Can\'t delete a company, silly'); 
addItem.enable(); 
deleteItem.disable(); 
editItem.disable(); 
} 
else if (!record.isLeaf()) { 
addItem.setText ('Add Employee'); 
deletelItem.setText ('Delete Department'); 
editItem.setText ('Edit Department'); 
addItem.enable(); 
editItem.enable(); 
deleteItem.enable(); 
} 
else { 
addItem.setText ('Can\'t Add Employee'); 
editItem.setText ('Edit Employee'); 
deletelItem.setText ('Delete Employee'); 
addItem.disable(); 
editItem.enable(); 
deletelItem.enable(); 
} 


ctxMenu.showAt (evtObj.getXY()) ; 


} 





在 代码 清单 9-4 中 ， 创建 了 自己 的 onctxMenu 处 理 程序 ， 它 会 使 菜单 变 成 动态 的 。 这 个 处 理 
程序 要 完成 的 第 一 个 任务 就 是 通过 调用 视图 的 select 方 法 选择 用 户 界面 中 的 节点 。 这 个 select 
方法 被 继承 自 Ext.view.AbstractView 的 所 有 组 件 共享 ， 例 如 Ext.gird.GirdqPanel 和 




















Ext .picker .Time。 选 择 一 个 节点 是 因为 Ajax 在 被 TreeStore 的 代理 调用 后 ， 需 要 在 树 形 面板 
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中 进一步 检索 这 个 节点 。 
每 当 树 形 面 板 的 itemcontextmenu 事 件 被 触发 ， 它 都 将 传递 6 个 参数 : 
D 捕获 该 事件 的 视图 ; 
口 代表 一 个 Ext .data.NodqeInterface 记 录 的 Mode1 实 例 ; 
口 指向 被 右 击 节 点 的 Ext .Element 的 引用 ; 
口 该 节点 的 数字 索引 ; 
口 生成 的 Ext .Eventobject 实 例 ; 
口 传递 给 Ext .util.observable. addListener 的 options 对 象 。 
返回 到 源 代码 , 会 发 现 并 没有 用 到 最 后 一 个 引用 ,因为 不 需要 它 。 这 里 的 引用 太 多 了 ， 
不 是 吗 ? 如 果 你 觉得 似曾相识 ， 或 许 是 因为 这 和 网 格 面板 中 的 jtemcontextmenu 事 件 非常 
相近 。 

接 下 来 , 通过 显 式 调用 evtobj .stopEvent 终 止 了 浏览 器 默认 的 上 下 文 莱 单 。 当 需要 用 自己 
的 上 下 文 菜单 蔡 换 浏览 器 默认 的 上 下 文 菜单 时 ， 这 样 的 处 理 方式 会 经 常用 到 。 

之 后 处 理 程序 通过 调用 稍 时 之 前 创建 的 builqctxMenu 工 厂 方法 来 构建 上 下 文 菜单 @, 它 在 
本 地 保存 了 引用 ,就 是 this .ctxMenu， 因 此 我 们 没有 必要 为 随后 出 现 的 每 个 处 理 程序 调用 都 创 
建 一 个 菜单 。 

这 时 , 想 引 用 该 视图 和 被 选择 的 节点 以 便 接 下 来 能 够 使 用 它们 。 这 样 做 避免 了 进一步 的 组 件 
查询 ， 以 及 危险 的 Ext .getcmp 方 法 的 调用 。 

之 后 创建 了 这 个 上 下 文 菜单 ctxMenu 以 及 其 每 个 菜单 项 的 一 个 本 地 引用 。 这样 做 可 以 便于 在 
以 后 需要 管理 菜单 项 时 轻松 读 到 它们 。 

在 创建 了 本 地 引用 之 后 , 继续 添加 了 一 个 if 控 制 块 介 , 在 这 里 检测 节点 的 类 型 并 据 此 修改 革 
单项 。 这 是 该 处 理 程序 的 主体 。 下 面 是 代码 逮 辑 。 

如 果 被 右 击 的 节点 是 根 节点 (record.getId() == 'myCompany' )， 配 置 菜 单项 以 允许 添 
加 部 门 , 但 禁止 删除 和 编辑 公司 节点 的 文本 。 还 禁 控 了 这 些 菜单 项 ( 删除 公司 和 编辑 公司 名 ) 以 
使 其 无 法 被 点 击 。 毕 竞 ， 你 不 想 任 何人 通过 简单 的 鼠标 点 击毁 掉 整 个 公司 的 数据 ， 不 是 吗 ? 

继续 ,检测 该 节点 是 否 是 叶子 节点 (部门 )。 之 后 修改 文本 以 允许 添加 座 员 和 删除 整个 部 门 。 
记 住 ， 如 果 需 要 的 话 ， 公 司 可 以 通过 删除 部 门 来 做 精简 。 还 激活 了 所 有 菜单 项 。 

如 果 被 右 击 的 节点 是 叶子 节点 ,代码 会 执行 else 语 句 块 。 在 这 种 情况 下 ，adad 菜 单项 的 文本 
会 被 修改 并 被 禁 掉 ， 以 防止 添加 一 个 雇员 到 男 一 个 雇员 ， 因 为 这 种 行为 是 不 合理 的 。 然 后 ,修改 
并 激活 了 “编辑 ”和 “删除 ”菜单 项 文本 。 

最 后 , 通过 调用 Eventobject 的 getxY 方 法 , 获取 到 鼠标 所 在 的 坐标 , 并 在 此 坐标 显示 上 下 
文 菜单 。 图 9-7 展 示 了 每 个 被 定制 的 菜单 的 外 观 。 

如 图 9-7 显 示 的 那样 ， 上 下 文 菜单 根据 右 击 节 点 的 类 型 显示 不 同 内 容 ， 这 演示 了 怎样 通过 一 
些 修 改 使 用 相同 的 菜单 完成 相似 的 任务 。 如 果 不 想 显示 或 者 想 隐 藏 掉 菜 单项 , 而 不 是 启用 或 禁用 
菜单 项 ,可 以 将 菜单 按钮 的 enable 调 用 切换 为 spow，disable 调 用 切换 成 nidqe。 现 在 可 以 开始 
为 上 下 文 菜单 添加 处 理 程序 了 可 以 从 最 简单 的 edit 开 始 。 
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Our first tree Our first tree Our first tree x 
| 三“ 全 日 司 My Company BMy Company 
f Add Depariment 因 有 -Anneoeesine 日 名 Accouniing 
2 Add Employee Salinas Frin 
q 田 | Edit Department 
下 本 ,| Delete Depariment | Edit Employee 
由 回 Customer Service 由 | 日 
下 四 Finances 避让 Finances | Emp 
[| Human Resources WW [Human Resources 司 Kelly, Tyrone 
由 [Legal Depariment 由 [Legal Deparment 司 cooley Francesca 
由 [Media Relations 由 [Media Relations 司 Reilly, Cherokee 
[DD Payroll 9 Payroll 司 cooke, Colton 
由 [JPublic Relations 由 [Public Relations 司 Pennington, Alea 
由 站 Quality Assurance 由 [Quality Assurance 司 Stephens, Edward 
DResearch and Development 加 Research ang Development 司 Greene. zahir A 
由 [LSales and Marketing 由 [Sales and Marketing 园 vaughn, Thane 
图 9-7 显示 公司 ( 左 ) 、 部 门 (中 ) 和 雇员 ( 右 ) 节点 的 动态 上 下 文 菜单 








9.4.2 ”添加 编辑 逻辑 





你 或 许 已 经 注意 到 了 ,点击 一 个 菜单 项 后 除了 菜单 消失 以 外 并 没有 其 他 任何 事情 发 生 。 这 是 




















因为 虽然 设置 了 上 下 文 菜单 ,但 是 并 没有 真实 的 处 理 程序 让 其 调用 。 现 在 将 创建 eait 人 处 理 程序 ， 
这 是 到 目前 为 止 最 容易 编码 的 一 个 处 理 程序 。 


























如 果 你 已 经 熟悉 了 Ext JS 3 或 者 更 早 的 版 本 ， 甚 至 正在 迁移 一 个 可 编辑 的 树 到 Ext JS 4 版 本 ， 


在 这 步 就 可 能 会 注意 到 一 个 奇怪 的 特性 : 在 更 高 的 版 本 中 缺乏 编辑 功能 。 


了 




















总 是 可 以 在 一 个 表单 或 者 窗口 中 绑 定 外 部 域 , 但 是 让 我 们 再 想 一 下 。Ext .tree.Panel 使 用 





Ext.grid.Panel 的 很 多 特性 ， 而 网 格 拥有 那个 很 酷 的 Ext .grid.plugin.cellEdqiting 捕 件 




















Editing 类 的 方法 , 这 个 你 已 经 很 擅长 了 。 让 我 们 看 下 下 面 代码 清单 中 的 插件 代码 ， 可 以 将 这 个 
插件 称 为 TreeCellEditing。 





代码 清单 9-5 ”扩展 CellEditing 插 件 


Ext .define('TreeCellEditing', { 
alias: 'plugin.treecellediting', 扩展 Ext .grid.plugin.CellEditing 
extend: 'Ext.grid.plugin.CellEditing', 插件 


init: function(tree) { 
Var treecolumn = tree.headerCt .down('treecolumn'); 
treecolumn.editor = treecolumn.editor 


| | {xtype: 'textfield'}; 
i 分 配 编辑 器 


this.callParent (arguments); 
3 
getEditingContext: function(record, columnHeader) { 
var me = this, 
grid = me.grid, 
store = grid.store, 
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rowIdx, 

GOLIdYX; 

View = grid.getView(), 
root = grid.getRootNode(), 


value; 
if (Ext.isNumber (record)) { 
rowIdx = record; 
//record = store.getAt (rowIdx); 通过 指定 的 索引 找 
record = root.getChildAt (rowIdx); 到 被 选择 的 节点 
} else { 


//rowIidx = store.indexOf (record); 
rowIdx = root.indexOof (record); 


} 
LE (Et 





6 通过 记录 引用 找到 被 选择 的 节点 


isNumber (columnHeader)) { 


colIdx = columnHeader; 
columnHeader = grid.headerCt .getHeaderAtIndex (colIdx); 


} else { 


colIdx = columnHeader.getIindex(); 


} 


value = record.get (columnHeader.datalIndex); 
return { 
grid: grid., 


record: record, 
field: columnHeader.dataIndex, 
value: value, 


IrOW: 


view.getNode (rowIdx), 


column: columnHeader, 
rowIdx: rowlIdx, 
coOLIdX: COlIdX 


ee 
} 
和 


扩展 的 代码 比 它 看 上 去 更 直接 。 现在 做 的 事情 我 们 将 会 在 第 13 章 进一步 解释 , 所 以 请 先 耐心 

















看 下 面 的 内 容 。 在 此 ， 完 成 了 两 个 目标 。 在 称 为 TrreecellEditing@ 的 扩展 类 中 ， 使 用 
AbstractPlugin 的 init 方 法 来 检查 该 树 是 否 有 一 个 编辑 器 ， 并 且 如 果 测 试 失败 的 话 为 其 赋予 
个 编辑 器 @。 只 有 想 要 自己 定义 树 形 面板 的 columns 属 性 , 并 设置 一 个 带 有 自 定义 编辑 器 的 树 



























































列 (tree column )， 才 需要 编辑 器 。 因 为 树 形 面板 自动 创建 了 树 列 ， 只 需要 为 其 添加 一 个 编辑 器 
即 可 。 现 在 ， 第 一 个 目标 完成 了 。 

第 二 个 目标 看 起 来 稍微 困难 一 些 。 就 像 我 们 稍 早 之 前 提 到 的 那样 , 需要 修改 的 代码 片段 依赖 
于 原型 链 的 下 一 层 ， 即 Ext .griqd.plugin.Rgditing。 上 整个 getEgditingContext 方 法 是 通过 两 
个 简单 的 覆盖 从 代码 中 复制 而 来 的 。 这 个 方法 需要 严格 返回 你 选择 的 节点 , 无 论 传递 给 方法 调用 
的 第 一 个 参数 是 谁 , 都 可 以 通过 它 的 索引 @ 或 者 记录 引用 人 @ 来 找到 它 。 就 在 这 两 个 覆盖 方法 的 上 
面 ， 可 以 看 到 我 们 曾经 在 网 格 中 使 用 的 源码 。 现 在 你 已 经 准备 好 了 自己 的 插件 。 





现在 是 时 间 让 新 所 
面 的 代码 清单 中 那样 。 















































上 件 开始 工作 了 。Ext JS 4 可 以 很 容易 添加 这 个 新 特性 到 树 形 面板 ， 就 像 下 
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代码 清单 9-6 ”完成 树 的 配置 


var treeEditor = Ext.create('TreeCellEditing', {clicksToEdit: 2}); 
Ext .create('Ext.window.Window',{ 
title : 'Our first remote tree', 实例 化 TreeCellEditing 
layout i oe 
autoShow : true, 
height : 360, 
width .228.08 
items 和 
xtype : 'treepanel', 
store : store, 


rootVvisible : true, 
listeners: { 


itemcontextmenu: onCtxMenu 
bi i 为 上 下 文 菜单 指定 监听 器 
plugins: [ 

treeEditor 


] 

} 
F)3 
在 代码 清单 9-6 中 ， 先 初始 化 了 TreeCellEditing 插 件 。 使 用 了 treeEditor 变 量 以 便 在 树 形 面 
板 中 引用 该 实例 。 你 本 可 以 只 使 用 ptype 配 置 来 做 懒 初始 化 ,不 过 之 后 你 会 在 编辑 逻辑 中 获得 直 
接 引 用 插件 带 来 的 便利 。 为 了 完成 显示 ， 配 置 了 itemcontextmenu 监 听 器 @， 就 像 之 前 提 到 的 
那样 。 

现在 已 经 准备 好 构建 编辑 逻辑 了 。 在 此 我 们 想 提醒 注意 代码 清单 9-6 中 的 clicksToEdit 配 
置 项 @。 就 像 在 可 编辑 网 格 中 那样 ， 可 以 使 用 已 经 注册 过 的 dblclick 事 件 进 入 编辑 模式 ， 而 不 
用 理会 整个 上 下 文 菜单 编辑 的 麻烦 。 但 这 是 一 个 显示 树 形 面板 的 内 部 交互 的 好 机 会 。 这 就 是 为 什 
么 下 面 代码 清单 中 你 要 在 新 的 上 下 文 菜单 中 初始 化 编辑 器 。 9 


代码 清单 9-7 配置 上 下 文 菜单 的 编辑 触发 右 
var onEdit = function(button, node) { 2 


Var menu = ,buttonup(}sy 


node node || menu.treeNode, 
Vliew Meny. treeView, 访问 引用 
tree View.ownerCcCt, 

view.getSelectionModel (), 


selMdl1 
colHdr tree.headerCt .getHeaderAtIndex(0); 


了 获取 列 索 引 
if (selMdl .getCurrentPosition) { 


pos = selMdl .getCurrentPosition(); 
colHdr = tree.headerCt .getHeaderAtIindex (pos.column); 显示 编辑 器 
} 


treeEditor.startEdit (node, colHdr); 










































































在 本 章 中 你 看 到 过 更 大 块 的 代码 ， 但 是 代码 清单 9-7 中 的 看 起 来 最 为 复杂 。 首 先 需 要 注册 几 
个 变量 : 通过 检索 被 点 击 按钮 的 父 容 带 @ 而 得 到 的 menu; 从 之 前 定义 (代码 清单 9-4 ) 的 菜单 上 
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的 属性 获得 的 node@ 和 view; 代表 树 形 面板 本 身 的 tree; 选择 模型 selMdal; 列 头 部 变量 
colHdr。 选 择 模 型 会 提供 树 形 面板 的 列 索引 (请 记 住 ， 树 形 面板 也 是 表格 ， 树 视图 是 以 列 的 形 
式 演 染 的 ， 跟 网 格 的 行为 很 相似 )， 因 为 在 识别 赋 给 树 形 面板 的 编辑 器 字段 时 列 头 部 信息 是 必须 
的 。 回 到 node@， 请 确认 你 已 经 注意 到 node 也 可 以 作为 参数 。 稍 后 开始 添加 节点 的 时 候 你 会 用 
到 它 。 

以 防 树 形 面 板 被 配置 为 使 用 单元 格 集合 模型 ( cellmode1 )， 可 以 自动 @ 获 取 树 列 的 位 置 ， 
以 确保 正在 编辑 网 格 中 正确 的 字段 。 最 后 ， 执 行 treeEdqitor 搬 件 实例 的 startEdit 方 法 @@。. 注 
意 到 怎样 重用 treeEditor 的 引用 了 吗 ? 

现在 有 了 一 个 具备 完整 功能 的 树 形 面 板 , 它 可 以 为 每 个 节点 显示 编辑 器 。 当 用 户 按 下 回 车 键 
时 你 认为 会 发 生 什么 呢 ?” 你 猜 对 了 : 记录 会 被 更 新 , 存储 将 会 通过 代理 与 服务 器 同步 该 更 新 。 存 
储 会 独自 承担 这 些 工 作 。 

刷新 页 面 ， 右 击 一 个 节点 ， 并 请 点 击 Edit 按 钮 。 在 图 9-8 中 我 们 右 击 选 择 该 节点 将 Accounting 
部 门 的 名 字 更 改 为 了 Legal。 然 后 ,我 们 点 击 Edit 菜 单 按钮 ， 它 会 在 该 节点 的 物理 位 置 处 演 染 一 个 
单行 文本 框 为 编辑 器 。 接 下 来 我 们 将 名 字 从 Accounting 改 为 Legal 并 按 下 回 车 键 。 这 将 改变 Node 
的 值 并 触发 存储 的 aatachangeq 事 件 ， 自 动 调用 sync 方 法 。 因 为 服务 器 接受 了 该 值 ， 新 的 值 持 
久 化 在 了 用 户 界面 上 。 请 记 住 ， 当 服务 器 返回 {success: false} 或 者 请 求 失败 了 ， 节 点 的 文本 
值 会 被 回 置 。 






































































































































Our first tree Our first tree Our first tree Our first tree x 
3HHNMy Company BHMy Company My Company 习 司 My Company 
Accounting 9 Legalf 日 与 Legal 
Add Employee 司 Salinae, Er 习 Erin 
| 习 Morales, Lill 习 Morales, Lilith 
1 司 Avery, Amity 司 Avery, Amity 
Dalete Doparime 习 Ryan, Garet Ryan, Gareth 
习 Branch, Thaddev 习 Branch, Tna 习 Branch, Thaddeus 
司 Kely Twone 司 Kelly. Twont 国 Kelly, Twone 
司 cooley Francesc 司 ceoley Fral 园 cooley, Francesca 
司 Reilly, Cherokee 司 Reilly, Cherc 己 加 Reilly, Cherokee 
辐 Cooke, Colton 司 Ceoke, Colt 司 Cooke, Co 辐 Cooke, Colton 
司 Pennington, Alea Pennington, Penningio' 刁 Pennington. Alea 
导 Stephens. Ed 区 国 stephens. Edward 
司 Greene. Zahir 司 Greene. Zat Greene, Z 司 Greene. Zahir 
司 vaughn.Thane 司 vaugm. Thd 司 veughn.T 国 Vaughn. Thane 








图 9-8 “使 用 树 形 编辑 器 编辑 树 形 面板 中 一 个 节点 的 结果 
这 为 树 形 面板 提供 了 最 简单 的 CRUD 功 能 。 在 Web 应 用 中 编辑 部 件 名 是 一 件 很 常见 的 任务 。 
很 自然 的 ， 如 何 实现 依赖 于 业务 需求 。 使 用 新 创建 的 TreeCellEditing 插 件 可 以 简化 应 用 流程 ， 免 
于 使 用 输入 对 话 框 ， 比 如 消息 提示 框 。 
接 下 来 着 手 删除 节点 的 事项 。 即使 它 需要 额外 的 确认 步骤 , 删除 操作 还 是 要 比 本 章 之 前 所 做 
的 要 简单 一 些 。 


9.4.3 着手 删除 
为 了 设置 树 形 面板 的 删除 功能 ， 要 为 Delete 菜 单 按钮 创建 一 个 处 理 程序 。 很 自然 的 ， 删 除 一 
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个 对 话 框 回调 函数 将 会 触发 存储 的 sync 方 法 并 最 终 删 掉 该 节点 。 














般 需 要 向 用 户 显 示 一 个 确认 对 话 框 ， 所 以 必须 为 用 户 确认 进行 编码 。 简 单 起 见 ， 将 使 用 现成 的 
Ext .Msg .confirm 方 法 来 显示 这 个 对 话 框 。 这 意味 着 需要 为 确认 对 话 框 构建 一 个 回调 函数 。 这 


现在 你 已 经 对 自己 需要 做 的 事情 有 了 一 些 了 解 , 可 以 继续 处 理 程序 的 编码 了 ,就 像 下 面 代码 


清单 中 显示 的 那样 。 
代码 清单 9-8 向 树 形 面板 添加 删除 功能 
var onConfirmDelete = function(answer, value, cfg, button) { 若 点 击 了 Yes， 则 
if (answer != 'yes') return; 返回 
var menu =s: "button,. Us().; 
node = menu.treeNode; esi 销毁 节点 
node.remove (true); 


var onDelete = function 


Var callback = Ext.bind(onConfirmDelete, undefinedqd, 


true); 


Ext .Msg .confirm( 


(button) { 


'Approve deletion', 
'Are you sure you want to delete this node?', 


callback 
) 汉 
} 四 











onConfirmDelete, 是 晚 些 时 








候 将 创建 的 确认 对 话 框 的 处 理 程序 。 如 果 对 话 框 中 





[button], 
六 创建 回调 函数 


在 代码 清单 9-8 中 ， 创 建 了 两 个 方法 来 处 理 CRUD 功 能 中 的 删除 操作 。 第 一 个 方法 ， 





的 Yes 按 钮 被 点 


击 @， 它 将 查找 NodeInterface 引 用 并 删除 它 。 设 置 了 deletion 参 数 为 Lrue 人 @， 意 味 着 它 将 








会 一 并 删除 该 节点 介 。 这 一 行为 也 会 触发 存储 的 datachanged 事 件 ， 强 制 存 储 同步 。 
在 这 个 虚构 的 迷你 应 用 中 , 服务 器 将 会 获取 到 该 节点 的 ID 值 , 并 在 数据 库 或 文件 系统 中 执行 
删除 操作 ， 然 后 返回 类 似 于 {success: true} 的 信息 ， 这 代表 着 删除 的 确认 。 





创建 的 第 二 个 方法 (onDelete ) 是 Delete 按 钮 的 处 至 

















程序 。 当 这 个 方法 被 调用 时 ， 它 会 使 用 


现成 的 Ext .Msg .confirm 方 法 来 显示 一 个 确认 对 话 框 ， 并 传递 三 个 参数 : 标题 、 消 息 体 和 回调 


回调 函数 是 使 用 工具 函数 1 








Ext .bingd (1 








Ext .Function.bind 的 缩写 ) 创建 的 。 这 个 有 用 的 


函数 创建 了 一 个 新 的 方法 ， 该 方法 创建 了 一 个 在 默认 作用 域内 调用 目标 函数 onconfirmpelete 


的 闭 包 ， 并 将 button 参 数 拼接 到 参数 列表 中 。 所 以 ，: 























Ext .bing 将 会 收 到 四 个 参数 : 被 调 函数 、 


作用 域 、 参 数 数 组 ， 以 及 表示 是 拼接 这 些 参数 到 参数 列表 ( true ) 还 是 覆盖 调用 函数 传递 的 参 
数 (false ) 的 布尔 值 。 默 认 参 数 由 Ext .Msg.confizrnm 提 供 ， 它 们 是 应 答 字符 吓 
在 使 用 Ext .Msg.prompt 时 有 用 ) 和 confirm 确 认 框 的 config 对 


“no”), 输入 值 (未 定义 ， 只 有 
象 。 如 果 想 使 用 anwser 人 参数 ， 











那 就 全 部 保留 它们 。 





昌 (“yes” 或 者 




















现在 应 用 展示 给 用 户 一 条 消息 和 两 个 选项 。 每 个 按钮 都 会 触发 回调 函数 , 但 是 请 记 住 , 只 有 
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当 Yes 按 钮 被 点 击 时 ， 才 应 执行 节点 删除 操作 。 
请 刷新 用 户 界面 并 删除 一 个 节点 。 图 9-9 演 示 了 当 我 们 刷新 用 户 界 面 并 删除 Accounting 部 门 节 
点 时 发 生 的 事情 。 


Our first tree Dur first tree Ourfirst tree Ourfirst tree 各 











BM Company 
田口 Advertising 
司 [ Asset Management 


BMy Company My 
1 


PI Amanuntinn 
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图 9-9 通过 确认 框 删除 一 个 节点 


在 我 们 右 击 Accounting 部 门 节点 后 ， 定 制 的 上 下 文 菜单 出 现 了 。 然 后 ， 我 们 点 击 Delete 按 钮 ， 
它 触发 了 onpelete 处 理 程序 。 这 立刻 会 显示 确认 对 话 框 。 我 们 点 击 Yes， 这 导致 了 
onConfirmDelete 方 法 被 完整 执行 ， 查找 存储 在 上 下 文 菜单 中 的 节点 引用 并 删除 (销毁 ) 该 节 
点 本 里 。 

在 一 个 真实 世界 的 应 用 中 ， 删 除 一 个 分 支 节点 通常 会 要 求 服 务 器 递归 地 获取 所 有 子 节点 的 
列表 ， 并 在 删除 分 支 节点 前 将 这 些 子 节点 从 数据 库 中 删除 。 一 个 巧妙 的 做 法 是 在 数据 库 中 设置 
一 个 触发 吉 ， 当 在 某 个 容器 节点 上 执行 删除 操作 时 通过 触发 器 调用 存储 过 程 来 删除 与 之 相关 的 
子 节点 。 

因为 我 们 通常 需要 一 个 确认 对 话 框 ， 所 以 从 树 形 面 板 中 删除 节点 还 是 需要 花费 一 些 努 力 的 。 
添加 一 个 节点 , 也 同样 困难 ， 因 为 UI 代码 需要 知道 添加 了 哪 种 节点 。 是 一 个 分 支 节点 还 是 叶子 节 
点 呢 ? 接 下 来 ， 你 将 会 看 到 怎么 对 这 类 行为 进行 编码 ， 并 让 用 户 节点 做 出 相应 的 反应 。 


9.4.4 “为 树 形 面板 创建 节点 


为 了 创建 一 个 节点 接口 , 必须 重用 之 前 已 经 做 过 的 一 些 工 作 , 同时 还 要 使 用 JavaScript 的 一 些 
很 酷 的 特性 ， 比 如 闭 包 。 因 为 树 形 编辑 骨 需 要 绑 定 并 显示 在 节点 上 面 , 将 需要 往 树 形 面板 中 注入 
一 个 节点 接口 ,并 在 这 个 新 节点 上 触发 一 个 编辑 操作 。 一 旦 创建 了 该 节点 , 存储 就 会 将 新 数据 同 
步 到 服务 器 。 在 创建 节点 时 有 机 会 编辑 节点 的 名 字 ， 因 此 存储 会 在 更 新 了 文本 ( 节点 名 字 ) 后 再 
次 与 服务 器 同步 数据 。 这 与 在 前 一 章 中 创建 的 编辑 器 网 格 中 添加 行 的 工作 方式 很 相近 。 下 面 的 代 
码 清 单 包含 了 创建 节点 功能 的 代码 。 
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代码 清单 9-9 向 树 形 面板 添加 创建 功能 


Var onAdd = function(button) { 


var menu = Dutton.upt(), 

node = menu.treeNode, 

view = menu.treeView, Be 确定 动画 长 度 

delay = View.expandDuration + 50, 

newNode, 

doCreate; 

En 创建 闭 包 

doCreate = function() { 


newNode = node.appendChild({text: 'New employee', leaf: true}); 
onEdit (button, newNode); 
}3 


if (!node.isExpanded()) { 
node.expand (false, 
Ext .callback (doCreate, this, [], delay)); 
1 0 延迟 节点 的 折 又 
else { 
doCreate(); 


} 
} 
在 代码 清单 9-9 中 ， 你 做 了 一 些 蛮 有 趣 的 工作 ， 顺 利 实现 了 创建 功能 。 下 面 是 它 的 工作 流程 。 

就 像 onEdit 方 法 ,需要 从 菜单 中 获取 几 个 引用 : NodeInterface 和 View。 用 后 者 来 获取 
展开 动画 持续 的 时 长 @Q@。 是 的 ， 用 户 界面 动画 和 数据 处 理 没有 什么 共同 之 处 ,但 是 这 部 分 时 间 
需要 计 入 在 内 。 当 父 节 点 需要 折 苹 时， 你 需要 先 展开 它 ， 只 有 等 到 动画 完成 后 ， 才 能 继续 进行 
编辑 处 理 。 

间隔 时 长 本 身 被 隐藏 在 视图 的 配置 中 ， 可 以 增加 额外 的 50 ms 来 让 用 户 界面 看 起 来 更 漂亮 。 
遗憾 的 是 ， 该 框架 并 不 会 等 待 节点 被 展开 ， 所 以 你 需要 在 回调 函数 中 添加 足够 的 时 延 。 

在 规划 onaga 处 理 程序 的 过 程 中 ， 可 以 预见 到 两 种 可 能 的 情形 来 获取 展开 或 折 双 的 父 节 点 。 
第 一 个 情形 很 直接 , 可 以 在 编辑 过 程 完 成 后 继续 创建 节点 。 但 是 如 果 该 节点 本 来 就 是 折 钱 状态 的 
呢 ? 在 这 种 情况 下 必须 展开 它 ， 并 传递 与 创建 和 编辑 sxpana 方 法 的 回调 函数 很 相似 的 参数 因 。 
因为 重复 这 些 代码 是 毫 无 意义 的 ， 创 建 了 一 个 很 好 的 闭 包 docreate@@。 闭 包 在 这 里 非常 有 用 ; 
可 以 访问 之 前 在 父 函 数 中 赋 过 值 的 变量 ， 甚 至 现在 重用 现成 的 代码 也 变 得 可 能 。 

doCreate 闭 包 封装 了 两 个 命令 。 第 一 个 , 将 子 节 点 拼接 到 被 选中 的 节点 的 后 面 ,并 将 其 命 
名 为 New employee， 将 其 leaf 属 性 设置 为 Lrue。 记 住 ， 正 在 创建 一 个 雇员 ， 所 以 需要 1eaf: 
true。 一 旦 完成 了 创建 座 员 ， 你 会 想 去 编辑 它 并 赋予 它 一 个 合适 的 名 字 。 这 里 重用 了 onEdit 
方法 , 传递 相同 的 菜单 按钮 实例 和 新 创建 的 节点 给 它 ， 这 样 TreeCellEditing 插 件 就 知道 在 哪儿 显 
示 编 辑 组 件 。 

哇 ， 这 个 真是 太 有 趣 了 ! 让 我 们 刷新 下 用 户 界 面 来 看 看 这 些 代码 怎么 工作 ， 就 像 图 9-10 中 显 
示 的 那样 。 在 这 儿 能 看 到 怎样 使 用 TreeCellEditing 插 件 来 向 树 形 面 板 中 添加 节点 ， 就 像 操作 系统 
一 样 。 
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图 9-10 使 用 TreeCellEditing 添 加 一 个 新 节点 到 树 形 面板 








当 我 们 右 击 Accounting 部 门 节点 ， 动 态 的 上 下 文 菜 单 会 像 我们 期 望 得 那样 出 现 。 我 们 点 击 添 
加 菜单 按钮 ， 它 会 触发 onAda 处 理 程序 。 这 会 导致 Accounting 节 点 被 展开 。 在 所 有 子 节点 都 被 加 
载 后 ， 一 个 新 的 节点 会 被 插入 进来 ，Treestore 的 sync 方 法 会 被 触发 ， 编 辑 操作 会 立刻 在 使 用 
了 TreeCellEditing 插 件 的 节点 上 被 触发 ,我 们 键入 一 个 雇员 名 字 并 按 下 回 车 键 ,这 将 导致 complete 
事件 被 树 形 存储 触发 ， 进 一 步调 用 sync 处 理 程序 ， 这 会 执行 另外 一 个 XHR ( XMLHttpRequest )。 
你 现在 还 能 实现 代码 来 添加 部 门 节点 到 树 中 ， 并 向 其 中 添加 雇员 。 

做 得 太 棒 了 ! 你 知道 了 怎样 构建 树 形 面板 ， 从 服务 器 端 为 其 获取 数据 ， 并 为 其 添加 CRUD 流 
程 。 现 在 你 能 将 这 些 部 件 添加 到 自己 的 应 用 中 去 了 。 




















9.5 小 结 
本 章 ， 我 们 梳理 了 很 多 代码 来 讨论 树 形 面板 ， 以 及 怎样 为 节点 建立 很 酷 的 CRUD 交 互 。 我 们 
从 Ext .tree.Panel 聊 起 并 讨论 了 一 些 支 持 类 ， 比 如 Ext .tree .View、 
和 Ext .data.NodeInterface。 你 知道 了 TreePanel 如 何 共 享 Gridranel 的 特性 ， 从 而 比 之 前 
更 加 强大 。 你 构建 了 一 个 静态 的 树 形 面板 , 在 这 里 节点 数据 都 是 从 内 存 中 读 取 , 你 还 看 到 了 JSON 
是 如 何 格式 化 的 。 

然后 , 你 构建 了 一 个 动态 的 树 形 面板 , 并 从 一 个 远程 数据 源 加 载 了 数据 ， 花 了 大 量 时 间 为 其 
添加 了 CRUD 操 作 。 为 了 实现 CRUD 操 作 ， 你 学 会 了 动态 修改 、 启 用 和 禁用 那个 可 以 重用 的 上 下 
文 菜单 。 你 知道 了 怎样 使 用 自己 的 TreeCellEditing 插 件 进 行 添加 和 编辑 ， 这 个 插件 还 赋予 树 形 面 
板 内 联 编辑 节点 名 字 的 能 

至 此 ， 你 已 经 了 解 了 该 框架 提供 的 一 些 用 于 数据 管理 的 部 件 ， 但 这 只 是 皮毛 而 已 。 下 一 章 ， 
你 将 会 通过 绘画 和 图 表 深 入 了 解 可 视 化 数据 的 展现 , 学 习 它 们 的 工作 原理 , 并 让 它们 在 应 用 中 更 
好 地 工作 。 





Ext .data.TreeStore 













































































绘画 和 图 表 








本 章 内 容 

口 使 用 Ext,draw 在 浏览 器 中 绘画 
口 理解 形状 和 表面 

口 创建 示例 绘画 

口 使 用 Ext 图 表 和 图 表 主 题 

口 配置 图 例 











可 视 化 数据 展现 被 认为 是 最 有 效 的 用 户 体验 机 制 。 图 表 对 于 任何 决策 制定 者 来 说 都 非常 “ 养 
上 腿 ”， 这 就 解释 了 为 什么 富有 各 种 图 表 的 仪表 板 经 常 是 软件 外 观 的 前 置 特征 。 

Web 应 用 也 有 同样 的 趋势 。 但 是 ， 无 插件 的 图 表 支 持 才 刚刚 出 现 ， 在 这 个 进程 中 Sencha 扮 演 
了 趋势 推动 者 的 角色 。 

与 其 之 前 的 版 本 相 比 ，Ext JS 4 对 大 量 组 件 进 行 了 升级 。 图 表 包 不 只 被 更 新 ， 而 且 被 完全 重 
写 。 它 再 也 不 需要 Flash 或 者 其 他 外 部 依赖 来 泻 染 令 人 惊艳 的 图 表 了 。 在 Ext.draw 包 的 支持 下 ， 
ExtJS 4 引入 了 新 的 图 表 类 型 ， 比 如 Scatter、Gauge 和 Radar。 本 章 , 你 将 学 会 实现 有 效 实用 的 图 表 
类 型 。 

因为 Ext JS 图 表 的 目标 是 不 再 依赖 Flash 来 呈现 “了 不 起 ”的 图 形 ，Sencha 团 队 带 来 了 可 以 使 
用 线条 和 形状 直接 在 浏览 器 中 进行 绘图 的 API。 为 了 让 你 理解 图 表 是 怎样 工作 的 ， 我 们 首先 深入 
介绍 新 的 Ext.draw 包 ， 告 诉 你 图 表 是 怎样 被 绘制 出 来 的 。 请 一 定 阅 读本 章 中 示例 的 相关 文字 ， 
为 这 是 一 个 复杂 的 话题 。 


10.1 绘制 形状 


在 浏览 器 世界 中 , 很 久 以 来 可 视 化 都 是 一 个 热门 话题 。 支 持 令 人 激动 的 新 特性 的 技术 已 经 出 
现 ， 之 前 的 标准 正在 被 废弃 。 企 业 级 框架 的 一 个 重要 使 命 就 是 支持 像 Microsoft Internet Explorer 
(IE ) 6 那样 老 旧 的 浏览 器 。 这 意味 着 支持 稳定 但 是 令 人 乏味 的 JavaScript， 或 者 我 们 应 该 称 之 为 
JScript， 这 是 标准 和 可 视 化 技术 。 

Ext JS 绘图 包 支 持 可 缩放 矢量 图 形 (SVG ) 和 矢量 标记 语言 (VML )。 它 们 都 对 流行 的 浏览 
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器 有 很 好 的 支持 ， 并 能 推送 矩阵 图 形 到 用 户 的 屏幕 。 虽 然 VML 比 该 框架 支持 更 早 的 浏览 器 ,但 
它 缺 乏 SVG 的 灵活 性 。 这 就 是 为 什么 SVG 被 作为 Ext.draw 的 默认 绘图 引擎 。 请 注意 ， 绝 大 多 数 IE 
浏览 器 都 将 需要 使 用 VML。 

如 果 你 深入 观察 过 Ext,draw， 会 发 现 它 儿 乎 是 扮演 了 一 个 绘图 引擎 中 间 件 的 角色 。 它 旨 在 提 
供 一 个 统一 的 配置 项 ， 将 命令 推送 到 绘图 引擎 ， 绘 制 出 相同 的 结果 。 注 意 ，Ext.draw 是 如 此 地 依 
赖 于 配置 ， 有 时 甚至 会 打破 和 其 他 Ext JS 组 件 的 一 致 性 。 有 具体 来 讲 ， 绘 图 时 你 必须 引用 某 些 特定 
的 配置 属性 : 

D fill-opacity 
























































DQ font-size 
D stroke-opacity 
D stroke-width 
注意 ， 所 有 这 些 属性 都 包含 一 个 连 字 符 ， 而 连 字符 只 允许 出 现在 JavaScript 对 象 被 引号 包 右 的 属 
性 中 。 

在 使 用 这 些 属性 之 前 , 请 随 我 们 重 温 下 浏览 器 内 置 矩 阵 绘图 的 基础 。 接 下 来 , 你 将 看 到 一 些 
非常 重要 的 概念 。 


10.2 ”绘图 概念 


绘图 的 前 置 条 件 是 表面 (surface )。 我 们 故意 不 称 之 为 画布 ( canvas ), 这 是 为 了 避免 和 HTML 
的 画布 标签 混淆 。 一 个 表面 就 是 一 个 接口 ， 通 常 存在 于 一 个 Ext .draw.Component 实 例 中 。 它 
提供 了 一 个 介 于 JavaScript 和 VML 或 SVG 引擎 的 抽象 层 。 











或 









































Ext JS 图 表 中 的 画布 
Ext JS 4.1 的 图 表 只 使 用 SVG 和 VML 作 为 绘图 引擎 。Sencha Touch 的 图 表 提 供 了 相似 的 接 
己 ， 但 是 它们 使 用 HTMLS 画 布 标签 ， 来 在 移动 设备 上 获得 更 好 的 性 能 。 





表面 ， 作 为 一 个 实例 ,在 Ext .draw.Ccomponent 实 例 中 以 属性 的 方式 存在 。 这 样 ， 表 面 可 
以 被 用 来 绘制 子 画面 (sprite )。 子 画面 是 用 来 组 成 形状 的 规则 或 不 规则 的 路 径 。 你 很 快 会 看 到 表 
面 是 怎样 和 子 画面 进行 交互 的 。 


10.3 ”表面 子 画 面 


没有 表面 绘图 就 无 法 进行 ， 所 以 表面 会 一 直 被 Ext .draw.Component 使 用 ， 让 我 们 检查 下 
后 者 是 如 何 处 理 艺术 化 的 笔触 的 。 
Ext .draw. Component 直接 继承 自 Ext .Componento 所 以 它 共 享 了 管理 所 有 组 件 生命 周 
期 管道 的 能 力 。 它 最 鲜明 的 特点 ， 表 面 ， 可 以 适应 你 想 要 的 各 种 形状 。 请 记 住 ，Ext .draw. 
Component 的 子 类 意味 着 各 种 形状 。 
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只 需要 很 少 的 几 个 配置 项 就 可 以 定制 一 个 Ext.draw 组 件 。 其 中 的 每 个 配置 项 都 会 对 绘图 结果 
产生 很 大 的 影响 。 
D autosize: 将 子 画 面 定 位 到 表面 的 左上 角 。 虽 然 它 不 遵从 子 画 面 的 X 坐 标 和 7 坐标 ， 但 
是 它们 还 是 需要 被 设置 。 
口 viewBox: 设置 为 true 来 测量 和 定位 项 目 以 填充 组 件 。 和 覆盖 大 小 和 方位 设置 (站 了 Y、 半 
径 ， 等 等 )。 
口 gradients: 一 系列 梯度 ， 可 以 使 用 基于 gradientId 的 子 画 面 。 
D snginePriority: 指定 想 使 用 的 首选 绘图 引擎 ， 如 果 客 户 端 浏览 器 支持 的 话 。 
一 些 选项 会 直接 影响 潜在 子 画面 的 行为 。Ext.draw 子 画面 支持 的 形状 与 绘图 引擎 原生 支持 的 
形状 很 类 似 : 
D circle ( 圆 形 ) 
Dellipse (椭圆 形 ) 
口 rect (rectangle， 即 矩形 ) 
口 text (文本 ) 
Dpath (路 径 ) 
D image (图 像 ) 
当然 ，path 是 各 行 各 业 的 千斤 顶 。 你 想 绘 制 的 所 有 形状 都 可 以 由 path 组 成 。 稍 后 本 章 将 会 涉及 
path 的 语法 基础 。 
子 画 面 可 以 通过 下 面 这 些 有 用 的 属性 做 进一步 定制 。 
口 width: 指定 和 矩形 的 宽度 
D height: 指定 矩形 的 高 度 
D size: 指定 正方 形 的 边 长 
口 radius: 指定 圆 的 半径 
口 x: 指定 在 X 轴 上 的 左上 角 位 置 
口 y: 指定 在 7 轴 上 的 左上 角 位置 
口 cx: 指出 圆 形 或 椭圆 形 在 X 轴 上 的 中 心 位 置 
口 cy: 指出 圆 形 或 椭圆 形 在 2 上 的 中 心 位 置 
口 stroke: 指定 边 的 颜色 
口 stroke-width: 指定 边 的 宽度 
D fi11: 指定 子 画 面 主体 的 颜色 
口 opacity: 指定 子 画 面 的 不 透明 度 
D text: 包含 要 尝 染 的 文本 字符 串 
口 font: 为 文本 提供 一 个 CSS 样 式 的 字体 表述 
口 path: 为 绘制 路 径 提供 一 个 SVG 语法 的 接口 
针对 子 画 面 的 特定 形状 ， 配置 选项 是 可 选 的 。 例 如 ，size 只 会 被 用 于 正方 体 ，radius 只 会 
被 用 于 圆 形 而 不 是 其 他 形状 。 确 切 的 匹配 在 框架 的 文档 中 有 很 好 的 描述 。 
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10.3.1 绘制 子 画 面 


现在 是 时 间 来 创建 你 的 第 一 个 艺术 作品 了 。 下 面 的 代码 单 显 示 了 怎样 创建 一 个 简单 的 圆 形 ， 
并 在 维持 纵横 比 的 情况 下 对 视图 进行 最 大 化 。 


代码 清单 10-1 绘制 一 个 圆 形 


Ext .onReady (function() { 








Var dc = Ext.create('Ext.draw.Component', { 
items 2 
type 全 区 二 二 村 
fi : '#79BB3F', 6 绘制 圆 形 
radius : 100, 
x .200 
y 人 
} 
Ext .create('Ext.window.Window', { 
width : 600 创建 父 容器 
height : 400， 
autoShow : true, 
title : 'Simple Circle', 
maximizable : true, 
layout “ee 
items de 
resizable 3 


dynamic: true 
} 
有 

这 

代码 清单 10-1 创 建 了 最 基本 的 图 画 。 实 质 上 ， 只 在 Ext.draw 组 件 中 创建 了 一 个 默认 的 表面 ， 
并 将 一 个 圆 形 的 子 画面 置 人 其 中 @@。 这 个 圆 形 的 半径 是 100 像 素 ， 它 的 X 难 标 和 7 坐标 均 被 设置 为 
200 像 素 。 图 像 在 Ext .windqow.Window 中 被 泻 染 @。 如 果 你 在 浏览 器 中 泻 染 这 个 示例 ， 将 看 到 
一 个 如 图 10-1 所 示 的 图 像 。 


Simple Circle elx 





























图 10-1 你 的 第 一 个 圆 ， 泻 染 出 来 的 效果 
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好 样 的 ! 你 已 经 使 用 Ext JS 创建 了 第 一 个 图 画 。 在 下 面 的 部 分 ， 你 会 学 习 如 何 整合 表面 的 设 
置 和 子 画面 的 设置 。 这 个 示例 将 会 参考 代码 清单 10-1 中 的 代码 ， 并 进一步 扩展 来 证 明 一 些 至 关 重 
要 的 概念 。 








10.3.2 ”管理 位 置 和 大 小 


你 已 经 成 功 创建 了 第 一 个 图 画 , 一 个 艳丽 的 绿色 圆 形 。 你 训练 有 素 的 眼睛 会 立刻 发 现 该 圆 形 
的 半径 超过 了 配置 的 100 像 素 。 原 因 隐 藏 在 配置 中 了 。 它 位 于 默认 的 viewBox 配 置 项 中 ， 被 设置 
为 了 true。 这 意味 着 这 个 圆 形 会 被 最 大 化 到 表面 的 大 小 ， 而 忽视 了 raqius 的 设置 。 

还 有 更 多 和 配置 项 的 交互 。 再 次 注意 下 x 和 y 设 置 。viewBox 设 置 并 不 会 关心 这 些 ， 只 要 它们 
被 设置 了 。 这 听 起 来 很 古怪 ， 所 以 我 们 会 在 一 些 示 例 中 使 用 它们 。 

首先 ， 分 别 将 x 和 y 设 置 为 1: 
































i 

BA 
这 个 同形 还 是 被 演 染 为 了 同样 的 风格 ,虽然 x 和 y 都 已 经 被 更 改 了 。 这 证 明了 viewBox: true 禾 
六 了 坐标 。 

现在 我 们 尝试 下 不 添加 x 和 y 的 配置 : 


€ 











type GLEELE., 
fill : ‘#79BB3F’, 
radius : 100 


} 


讨论 下 这 个 古怪 的 行为 。 它 令 其 中 的 一 个 坐标 变 为 未 定义 ，viewBox 属 性 不 再 生效 ( 见 图 
10-2 )。 但 是 问题 还 是 存在 ， 我 们 到 底 应 该 怎样 来 设置 圆 形 的 半径 和 位 置 呢 ? 














Simple Circle ox 














图 10-2 不 设置 x 轴 和 7 轴 坐 标 ， 圆 形 的 中 心 被 设置 为 0,0，radius 设 置 不 再 被 忽略 
有 两 种 方式 。 第 一 种 方式 是 将 viewBox 设 置 为 false， 就 像 下 面 代 码 清 单 中 显示 的 那样 。 
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代码 清单 10-2 ”禁用 viewBox 


Var dc = Ext.create('Ext.draw.Component', { 


ViewBox : false, 

items 和 全 
type ee 
fil1l : '#79BB3F', 
radius : 100, 
六 2200; 
y “7200 


} 
}); 


现在 viewBox 已 经 被 禁 掉 了 @Q@， 让 我 们 看 看 示例 泻 染 以 后 的 效果 

















[ 王 


Simple Circle 

















口 


将 viewBox 设 为 false 


(参见 图 10-3 )。 


x 








， 圆 形 不 应 该 








图 10-3 ”现在 圆 形 的 位 置 和 大 小 和 期 望 的 一 致 了 
已 经 禁止 了 自动 的 大 小 和 位 置 计算 ,取而代之 的 是 固定 的 设置 。 从 逻辑 上 来 
关心 x 和 y 属 性 ， 因 为 圆 形 并 没有 左上 角 【〈 其 他 角 也 一 样 )。Ext JS 将 会 用 坐标 来 匹配 圆心 。 
































第 二 种 方法 是 设置 XY ( cx ) 和 Y (cy ) 属性 ， 


代码 清单 10-3 ”用 cx 和 xy 有 效 定位 圆 形 








items : [{ 
type ele 
4 二 : '#79BB3F', 
radius : 100, 
CK ?200, 
cy 2 200 将 X、Y 坐 标 居中 设置 


1] 
用 了 更 少 的 代码 获得 了 同样 的 效果 。 设 置 中 心 Y 和 7@@ 和 禁 掉 view 
样 的 。 





而 不 是 x 和 y， 就 像 下 面 代码 清单 中 显示 的 那样 。 























Box 演 染 出 来 的 效果 是 一 





到 现在 为 止 ， 你 只 是 把 玩 了 一 些 简单 的 Ext.draw 组 件 的 行为 控制 配置 ，viewBox。 在 接 下 来 


的 示例 中 ， 我 们 将 展示 autosize 怎 样 和 你 的 子 画面 进行 交互 。 
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10.3.3 自 适 应 大 小 的 子 画 面 


autoSize 属 性 (查看 代码 清单 10-4 ) 会 遵从 子 画面 的 大 小 设置 ， 但 是 它 会 保证 整个 被 渔 染 
出 来 的 画面 会 拥有 可 能 的 最 小 宽度 和 高 度 。 很 自然 地 ， 它 排除 了 viewBox 设 置 ， 但 是 它 保留 了 x 
和 y 的 设置 需求 。 这 意味 着 必须 将 x 和 y 设 置 为 整数 ， 但 将 它们 设置 为 多 大 的 整数 则 无 关 紧 要 。 


代码 清单 10-4 启用 autosize 












































Var dc = Ext.create('Ext.draw.Component', { 

autoSize: true, 

items so 3 将 autosize 设 为 true 
type CLFGLE.; 
£i11 : '#79BB3F', 设置 最 小 正 整 数 
radius : 100, 
x Ci 
y : 1000 

}] 分 配 异 常 大 整数 


于 


将 autosize 设 置 为 Lrue@， 表面 会 自动 将 子 画 面 定位 到 其 内 部 , 与 其 左上 角 对 其 (0, 0), 并 
确保 占用 最 小 的 空间 。 为 了 演示 当 我 们 如 此 配置 时 ， 子 画面 是 如 何 管理 这 个 圆 形 的 ， 将 x 设 置 为 
最 小 的 正 整 数 @， 将 y 设 置 为 一 个 异常 大 的 整数 @。 你 肯定 注意 到 它 是 否 被 置 于 (1， 1000)。 就 如 
在 图 10-4 中 看 到 的 那样 ，X 和 27 难 标 都 被 忽略 掉 了 ， 但 是 它们 都 需要 被 设置 。 和 否则 ， 其 泻 染 效果 就 
和 图 10-2 一 样 了 。 




































































图 10-4 该 圆 的 绘制 遵从 了 radqius 设 置 ， 但 是 被 置 于 了 表面 的 左上 角 


到 现在 为 止 ， 已 经 创建 了 一 个 简单 的 圆 形 ， 也 已 经 看 到 了 各 种 子 画面 和 Ext .draw.Component 
(表面 ) 配置 的 多 种 多 样 的 组 合 。 接 下 来 要 登场 的 是 一 些 更 令 人 激动 的 内 容 ， 怎 样 来 动态 地 添加 
子 画 面 和 动画 并 绑 定 事件 。 


10.4 子 画 面 交 互 


你 可 能 想 用 Ext,draw 来 绘制 一 些 更 复杂 的 东西 ， 而 不 仅仅 是 一 个 圆 形 。 让 我 们 往 现 有 的 组 合 
里 增加 一 些 有 趣 的 东西 ， 来 创建 一 个 具有 交互 性 的 示例 。 
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在 下 一 个 示例 中 (代码 清单 10-5 )， 会 重用 之 前 示例 中 的 圆 形 并 将 其 置 于 一 个 固定 的 位 置 ， 
禁 掉 viewBox。 将 动态 地 添加 另 一 个 具有 淡 入 动画 的 圆 形 来 获得 一 个 更 漂亮 的 登场 。 最 后 ， 会 为 
新 加 的 圆 形 添加 一 些 事件 监听 器 ， 使 其 当 鼠 标 滑 过 时 令 其 移动 ， 在 鼠标 划 出 时 回 到 初始 位 置 。 


代码 清单 10-5 ”动态 添加 一 个 形状 





Var dc = Ext.create('Ext.draw.Component', { 
ViewBox : false, 本 实例 化 Ext .draw.Component 
items ot 
type i VeilLel: 
下 二 汪 灿 : '#79BB3F'，, 
radius : 100, 
光 人 
y $ 200 


}] 


Ext .create('Ext.window.Window', { 


width 6000. 
height ; 400， 
autoShow : true, 
title : 'Dynamically adding a new sprite to ' 
+'Surface with a 2-sec delay', 

maximizable : true, 
layout A 
items 2 Lded; 
resizable 3 

Se NE 访问 表面 以 添加 新 的 子 画 面 


}, 


listeners: { 


show: function() { 控制 线 宽 
Var sprite = dc.surface.addl(t{ 
type or OTECLE: 
£ill : '#846393°', 
stroke : '#a54222', 9 添加 边框 线 宽 
'stroke-width' : 5， 
opacity 8 
radius :E00 
> ee 控制 线 宽 并 填充 
y : 200 
> 
sprite.show(); 
} 在 表面 显示 子 画面 


} 
}); 


首先 , 创建 了 带 有 一 个 简单 Ext .draw. Component@ 子 组 件 的 Ext .window.Window， 为 绘 
图 创建 了 一 个 表面 ( 隐藏 在 ac .surface 中 )。 该 Ext .draw. Component 被 禁 掉 了 viewBox 和 
autoSize， 因 为 你 想 自 己 控制 子 画 面 的 大 小 和 位 置 。 第 一 个 子 画 面 被 配置 在 items 属 性 中 ， 它 
是 第 一 个 圆 形 ， 就 像 之 前 示例 中 的 那样 。 
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在 Ext .window .Window 实 例 化 刚 完成 后 ， 开 始 添 加 另外 一 个 子 画 面 @@。 将 等 待 这 个 窗 体 来 
泻 染 和 显示 ， 因 为 只 有 在 Ext .draw.Ccomponent 泻 染 后 表面 才 会 被 创建 。 你 已 经 猜 到 了 ， 在 没 
有 创建 完 的 表面 这 一 前 提 下 不 能 添加 子 画面 。 

可 以 手动 创建 一 个 表面 。Ext .draw.Component 有 一 个 createSurface() 方 法 来 完成 创建 
表面 的 工作 。 现 在 ， 你 知道 了 这 个 把 戏 ， 可 以 在 将 它们 呈现 给 用 户 之 前 将 其 绘制 出 来 。 

回 到 我 们 的 示例 ， 新 创建 的 圆 形 和 之 前 的 圆 形 拥有 相同 的 大 小 ， 但 是 它 被 向 左 移动 了 100 像 
素 。 它 被 赋予 了 不 同 的 颜色 ， 它 的 不 透明 度 被 设置 为 0。 边 线 可 以 被 配置 为 和 填充 体 分 离开 并 指 
定 它们 的 颜色 全 和 宽度 @。 不 透明 度 的 设置 既 会 影响 填充 体 颜 色 也 会 影响 边线 颜色 全 。 应 该 设置 
它们 中 一 个 的 不 透明 度 或 者 将 它们 设置 为 不 同 ， 可 以 一 直 获 得 CSS 的 威力 ， 并 能 够 使 用 RGBA 来 
设置 填充 色 和 边线 颜色 (比如 z*gba(012，123，230，0.4) )。 

是 时 候 来 看 一 下 子 画 面 (参见 图 10-5 ) 了 。 子 画面 的 show () 方 法 @ 提 供 了 可 选 的 但 是 很 方 
便 的 redraw 参 数 。 它 告诉 表面 再 次 演 染 子 画 面 。 现 在 你 无 法 从 redraw 中 获得 更 多 便利 ， 所 以 可 
以 将 它 放 在 一 边 。 















































Dynamically adding a new sprite to surface with a 2-sec delay Dx 

















图 10-5 ”第 二 个 被 动态 添加 的 圆 


因为 这 个 子 画面 的 不 透明 度 被 初始 设置 为 0， 需 要 增 大 该 数字 来 使 这 个 圆 形 可 见 。 为 了 让 这 
个 过 程 变 得 更 酷 ， 可 以 使 用 下 面 的 代码 来 实现 过 渡 动 画 ， 将 它 放 在 sprite.show() 后 面 : 





SS 








sprite.animatel(t{ 
duration: 1000, 
easing: 'easeOut', 
tO 
opacity: .9 
} 
})3 


不 透明 度 的 范围 为 0~1。 设 置 为 0.9 将 会 使 这 个 子 画 面 看 起 来 是 完全 可 见 的。 该 动画 将 会 持 
续 1s( 1000 ms )， 并 且 在 接近 最 后 时 刻 时 减速 。 

现在 你 有 了 一 个 漂亮 的 登场 。 让 我 们 来 添加 一 些 事件 来 让 你 的 绘图 可 以 响应 鼠标 指针 移动 。 
将 下 面 的 代码 块 添加 到 sprite.animate() 代码 块 后 面 : 
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SDrite.on('mouseover'，Ext.binad( 
sprite.animate, 
SDritey 

[{ 
duration: 500, 
easing: 'easeOut', 
to A 
opacity: .6, 
translate: { 
x: -100 
} 


}] 
同属 


SDrite.on('mouseout '，Ext.bind( 
sprite.animate, 
sprite, 

[{ 
duration: 300, 
easing: 'easeIn', 
ts 装 
opacity: .9， 
translate: { 
光 .0 
} 


}] 
)e 
当 鼠 标 指针 移动 到 其 上 方向 左 划 过 时 ,第 二 个 圆 形 会 做 出 反 
出 该 圆 形 ， 该 子 画 面 将 会 重 置 自己 的 位 置 。 这 两 个 事件 的 回调 也 

















Animating sprites 








图 10-6 ”鼠标 悬浮 时 ， 第 二 个 圆 移动 到 第 一 


应 ， 就 像 图 10-6 所 示 。 将 鼠标 移 
ed 


olx 


个 圆 项 上 


你 刚刚 已 经 学 习 了 怎样 动态 地 往 表面 中 添加 子 画面 ， 以 及 怎样 实现 动画 和 向 它们 注册 事件 。 
类 型 共享 模式 。 在 下 一 节 中 ， 你 将 会 看 到 图 表 是 怎样 绘制 的 ， 


你 或 许 已 经 发 现 这 和 预定 义 的 图 表 类 型 共 
以 及 怎样 使 用 路 径 子 画面 来 创建 一 个 自 定义 的 形状 。 
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10.5 ”掌控 路 径 


SVG 和 VML 是 它们 自己 的 语法 引擎 。 到 现在 为 止 ， 在 本 章 我 们 在 不 直接 讨论 语法 的 情况 下 
成 功 地 使 用 了 这 两 个 引擎 。 现 在 是 时 候 接触 创建 自 定 义 路 径 的 基础 知识 了 , 这 将 是 JavaScript 世 界 
外 一 次 有 趣 的 探险 。 

绘制 路 径 本 质 上 就 是 画 一 条 从 点 4 到 点 Z 的 线条 , 中 间 有 AN 个 点 。 它 们 的 坐标 是 相对 于 X 币 和 了 
轴 的 指定 点 。 这 条 路 径 包 围 的 区 域 也 可 以 被 定义 为 完全 分 开 的 样式 。 此 外 ， 两 个 点 可 以 用 一 条 直 
线 相 连 ， 也 可 以 被 多 种 路 径 的 曲线 相连 。 这 些 行为 通过 下 面 这 些 命令 来 指示 : 

口 M = 移动 到 
口 工 = 直线 到 

口 再 = 水 平 直线 到 

口 V= 竺 直 直 线 到 

DC= 曲线 到 

口 $= 平滑 曲线 到 

口 Q= 二 次 贝 齐 尔 曲线 到 
口 T= 平 滑 二 次 贝 齐 尔 曲线 到 
口 A= 椭 圆 孤 

口 Z= 闭合 路 径 

所 有 这 些 命令 都 可 以 用 小 写字 母 表达 。 大 写字 母 指 明 是 绝对 定位 点 , 而 小 写字 母 指 明 是 相对 
定位 点 。 






































提示 关于 矢量 绘图 更 详尽 的 解释 请 参阅 HTML 5 in Action (Manning，2013 )。 


示例 是 解释 用 法 的 最 好 方式 。 请 准备 一 张 纸 和 一 文笔， 现在 画 一 个 五 角 星 ( 图 10-7 )。 























图 10-7 通过 一 步 一 步 的 点 连接 手绘 的 星 形 
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需要 画 多 少 条 边 ? 让 我 们 借助 这 幅 图 来 数 一 下 。 有 起 点 ， 经 过 的 4 个 点 ， 回 到 起 点 ， 因 此 总 
































共有 5 条 边 。 
将 这 幅 图 转换 为 第 卡 儿 坐 标 系统 。 每 个 点 都 是 由 一 对 到 原点 (平面 中 心 ) 的 距离 ( 用 像素 表 














达 ) 的 坐标 组 成 的 。 证 我 们 从 0, -100 开 始 : 


M. 0”=100 T5881 .95 3 95 33-59 8 二 7 了 2 


第 一 眼看 起 来 好 像 魔 术 ， 但 其 实 它 就 是 几何 而 已 。 用 直 白 的 语言 表达 如 下 : 











(1) (M) Move to 0 -100 (1) (M ) 移动 到 (0, -100) 

(2) (L) Line from 0, -100to 58,81 (2) ( 工 ) 从 (0, 一 100) 到 (58,81) 连 接 直线 

(3) (Repeat L) Line from 58,81 to -95, -31 (3) (重复 L ) 从 (58,81) 到 (-95, -31) 连 接 直线 
(4) (Repeat L) Line from -95, -31 to 95, -31 (4) (重复 L ) 从 (-95, -31) 到 (95, -31) 连 接 直线 
(5) (Repeat L) Line from 95, -31 to -59,81 (5) (重复 L ) 从 (95, -31) 到 (-59,81) 连 接 直线 
(6) (Z) Finish the path and draw the line back (6) (Z ) 完成 该 路 径 并 连接 回 起 点 


to the starting position 
现在 我 们 已 经 梳理 过 理论 了 ， 是 时 候 将 这 段 路 径 的 代码 插 进 我 们 的 Ext JS 4 应 用 中 了 ， 就 像 下 面 
代码 清单 中 显示 的 那样 。 


代码 清单 10-6 绘制 一 个 星 形 














Var dc = Ext.create('Ext.draw.Component', { 
items Co 
type E’ pat 
下 1 证 了 SA 
path 人 OO 


}] 


Ext .create('Ext.window.Window', { 


width ;6003 
height : 400, 
autoShow : true, 
title vorar (Sath)y 
maximizable : true, 
layout 5 
items SG 
resizable :7 
dynamic : true 


}); | 
就 像 你 看 到 的 那样 ， 它 的 模式 和 其 他 子 画面 类 型 是 一 致 的 。 在 绘图 组 件 中 你 添加 了 路 径 , 但 
还 需要 额外 的 步骤 才能 真正 完成 路 径 的 绘制 。 路 径 并 不 像 圆 形 和 正方 形 那样 是 预 配置 的 , 因此 你 
需要 用 点 指令 来 操作 一 下 它 。 你 要 给 path 属 性 分 配 指 令 。 输 出 效果 请 参见 图 10-8。 

这 个 星 型 看 起 来 就 像 手 画 的 一 样 。 此 外 , 我 们 填充 了 它 的 内 部 , 使 得 它 看 起 来 更 致密 。 现在 ， 
你 已 经 熟悉 了 创建 和 配置 组 件 , 所 以 唯一 需要 你 添加 进 示例 中 的 就 是 路 径 数 据 。 它 用 一 个 字符 串 
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的 形式 呈现 ， 它 就 是 这 样 传递 给 绘画 引 警 的 。 


Star (path) Djx 














图 10-8 ”通过 Ext.draw 绘 制 的 星 形 


现在 你 明白 了 在 Ext JS 4 中 绘画 的 工作 原理 了 。 通 过 截至 现在 从 本 章 学 习 到 的 知识 ， 你 现 
在 明白 了 Ext.chart 包 是 怎样 在 篆 卡 儿 坐 标 系 平面 上 绘制 出 图 表 了 ， 其 至 还 可 以 创造 出 自己 的 图 
表 类 型 。 

在 本 章 的 剩 下 部 分 ， 你 还 会 创建 多 种 类 型 的 图 表 。 这 将 会 是 一 次 有 趣 的 旅行 ， 用 Ext JS 4 绘 
制 动 画 、 事 件 驱 动 的 形状 ， 以 及 线条 和 区 域 。 


10.6 深入 了 解 图 表 


在 你 绘制 第 一 个 图 表 之 前 , 让 我 们 先 来 仔细 分 析 一 个 图 表 的 主要 组 件 。 图表 为 存储 中 的 数据 
提供 了 一 个 图 形 化 的 展现 方式 。 再 者 ， 图 表 组 件 直 接 继 承 自 Ext .draw.Component ， 这 意味 着 
你 可 以 通过 个 性 化 的 绘图 为 图 表 添 彩 。 

就 像 图 10-9 展 示 的 那样 ， 图 表 的 三 个 主要 组 件 如 下 。 

口 轴 (Ext.chart.axis.*) 定义 数据 维度 。 





















































口 序列 ( Ext .chart .series.*) 可 视 化 地 展现 一 个 数据 项 ， 如 直线 ( 点) 条 、 饼 (局 
片 ) 等 。 

口 图 例 (Ext .chart.Legend ) 提供 了 一 个 出 现在 图 表 上 的 可 选 的 变量 列表 ， 每 个 都 代 
表 着 赋 给 数据 点 的 子 画 面 。 


在 基于 笛 卡 儿 平 面 的 图 表 ( 折线 图 、 条 形 图 、 散 点 图 、 柱 状 图 、 区 域 图 ) 中 ， 轴 是 指 X 轴 和 了 
轴 ， 分 别 代表 着 水 平和 垂直 轴 ， 每 个 轴 都 伴随 着 数字 和 分 类 标志 ， 很 容易 从 Ext .data. store 
记录 中 提取 出 来 。 记 录用 数据 来 提供 一 系列 的 对 图 形 化 比较 有 意义 的 信息 。 

序列 ( series ) 代表 了 观察 者 的 兴趣 所 在 。 它 们 是 代表 了 特定 值 的 绘画 。 在 Ext JS 图 表 的 世界 
中 ， 有 8 种 有 效 的 序列 类 型 ( 见 图 10-10 ): 
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口 折线 图 (line ) 

口 条 形 图 ( bar ) 

口 柱 形 图 ( column ) 
口 面积 图 ( area ) 

口 散 点 图 ( scatter ) 
口 饼 图 (pie ) 

口 仪表 图 (gauge ) 

口 雷达 图 (radar ) 


图 例 
Our First Ext JS Chart 口 X 
MW % Reluming Customars 




















90 并 
wh 5 | 
70 -| 其 
四 
总 60-. 3 
多 50- x 
号 40j \ 
m 
> a0 站 x 
10 
i 
人 和 至 六 BR 训 半 3 5 5 
人 昌 3 是 
Metrics Axis 
图 10-9 第 一 个 图 表 
Series 
ss 
Pie Gauge 
| 






Scatter 


Area Bar Line 


图 10-10 ”序列 继承 模型 。 稍 卡 儿 序列 显示 在 这 儿 是 因为 它 是 Area、Bar、Line 和 Scatter 
类 的 超 类 ， 但 是 我 们 不 会 配置 第 卡 儿 类 本 身 的 实例 
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让 我 们 来 审视 下 有 效 序列 的 列表 和 序列 继承 模型 。 如 果 这 对 于 你 来 说 太 过 复杂 ， 别 担心 。 你 
可 以 轻易 地 将 它们 归 入 两 组 : 需要 轴 ( 饼 型 、 刻 度 型 和 雷达 型 ) 的 和 不 需要 轴 的 ( 所 有 的 笛 卡 儿 
类 型 )。 
我 们 中 的 绝 大 多 数 人 都 会 在 某 一 刻 面 临 一 个 抉择 : 到底 哪 种 图 表 类 型 最 适合 用 来 呈现 结 
呢 ? 这 里 有 一 些 通用 的 规则 来 指导 我 们 选用 具体 的 序列 。 
口 线 型 ”显示 大 小 跨度 的 数值 改变 趋势 ， 在 间隔 较 小 时 很 有 用 。 
口 条 型 ”用 一 个 值 和 另 一 个 进行 比较 ， 垂 直 排 布 。 
口 柱 型 ”和 条 相同 ， 但 是 呈 水 平 排 布 。 
口 面积 型 ”与 线 相 似 ， 特 别 是 在 跟踪 两 个 或 多 个 组 的 改变 时 很 有 用 。 
口 散 点 型 ”用 来 决定 两 个 不 同 值 之 间 的 关系 ， 在 可 视 化 比重 时 很 有 用 。 
口 饼 型 不 像 箔 卡 儿 类 型 ， 显示 每 片 在 整体 中 的 比重 。 
口 仪表 型 ”在 给 定 的 最 小 和 最 大 区 间 显 示 值 。 
口 雷达 型 ”并 行 比较 由 多 个 参数 组 成 的 各 种 选项 。 
因为 图 表 是 男 一 种 表面 , 你 很 容易 将 定制 的 形状 其 至 图 像 添加 到 上 面 。 但 是 请 保证 将 它们 放 
在 面板 上 合适 的 位 置 ， 因 为 在 图 表 中 viewBox 是 false。 你 已 经 知道 viewBox 会 实现 自动 的 形状 - 
位 置 计 算 。 
现在 我 们 已 经 介绍 了 基础 知识 ， 你 已 经 知道 怎样 一 步 一 步 地 创建 如 图 10-9 所 示 的 图 表 。 


10.7 ”实现 箔 卡 儿 图 表 


本 章 的 早 些 时 候 ， 用 了 一 个 Ext .draw.Component 实 例 访问 了 表面 。 在 绘制 图 表 的 时 候 ， 
将 充分 利 运 用 这 个 直接 继承 自 Ext .draw. Component 的 Ext .chart . chart 类 只 是 有 一 个 重要 
的 区 别 : items 属 性 很 少 会 被 用 到 。 稍 后 你 会 明白 此 处 的 原因 。 


10.7.1 配置 轴 


让 我 们 再 次 从 更 基本 的 角度 看 下 这 个 例子 : 手绘 。 当 绘制 草图 的 时 候 , 你 会 先 绘制 什么 呢 ? 
没 错 : 轴 。 但 是 在 开始 绘 轴 之 前 ， 想 一 下 到 底 期 望 什么 种 类 的 数据 呢 : 最 小 最 大 范围 、 在 每 个 轴 
上 比较 什么 、 如 何 度量 空间 。 事 不 宜 迟 ， 让 我 们 在 下 面 的 代码 清单 中 引入 轴 。 


代码 清单 10-7 列 出 轴 









































































































































Ext .onReady (function () { 
Var generateData = function (n, floor)f{ 
var Gata = []， 3 添加 随机 数据 生成 器 
1; 
fl Odr =: CELOGL ‘GFtL1O0r = 0)3- 20 ELlOOrS 
for (i = 0; i < (n || 12); i++) { 


data.push(t{ 
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name: Ext.Date.monthNames[i % 12]， 
datal: Math.floor(Math.max( (Math.random() * 100), floor)), 
data2: Math.floor(Math.max((Math.random() * 100), floor)), 
data3: Math.floor(Math.max( (Math.random() * 100), floor)), 
data4: Math.floor(Math.max( (Math.random() * 100), floor)), 
data5: Math.floor(Math.max( (Math.random() * 100), floor)), 
data6: Math.floor(Math.max( (Math.random() * 100), floor)), 
data7: Math.floor(Math.max( (Math.random() * 100), floor)), 
data8: Math.floor(Math.max((Math.random() * 100), floor)), 
data9: Math.floor(Math.max( (Math.random() * 100), floor)) 
> 
} 
return data; 
添加 数据 存储 
var store = Ext.create('Ext.data.JsonStore', { 
fields: ['name', 'datal', 'data2', 'data3', 'data4', 'data5'], 
data: generateData() 
}), 
ehart. := EXLCESAate( “ExteChart Charb.sy. | 
store: store, 
background: { 
ffi] "#fff" 
}, Pe 定义 轴 
axes: [ 设置 轴 类 型 
{ 
type: 'Numeric', 
position: 'left', 
title: 'Values Axis' 
起 人 指定 轴 位 置 
{ 
type: 'Category', 
position: 'bottom', 配置 分 类 轴 
fields: 'name', 
title: 'Metrics Axis' 
} 


这 


Ext .create('Ext.window.Window', { 
width 600， 
height 470， 
autoShow true, 
title 'Our Very First Ext 
maximizable true, 
layout i 
items [chart], 
resizable { 
dynamic: true 


JS Chart', 


10.7 实现 笛 卡 儿 图 表 217 





代码 清单 10-7 有 点 儿 长 ， 因 为 它 包 含 了 很 多 我 们 在 其 他 示例 中 已 经 使 用 过 的 东西 。 可 复 用 的 
部 分 是 随机 数据 生成 器 @ 和 数据 存储 ( data store ) @。 取 元 素 而 代 之 的 是 ， 必 须 设置 轴 (axis ) 
全 。 轴 是 一 类 很 特殊 的 元 素 ， 它 是 Ext .chart .axis .Axis 的 实例 。 预 配置 的 轴 类 型 @ 有 : 数字 
(数字 )、 类 别 (文本 )、 时 间 (日 期 对 象 ) 和 刻度 尺 。 

每 个 轴 都 需要 被 放置 在 笛 卡 儿 平面 的 某 个 地 方 。 在 绝 大 多 数 的 图 表 中 ，Ext JS 的 图 表 也 不 例 
外 , 观察 一 个 简单 的 笛 卡 儿 平 面 的 四 分 之 一 就 可 以 了 。 这 就 是 为 什么 需要 指明 轴 是 作为 该 四 分 之 
一 的 哪 条 边界 呢 回 。 可 能 的 值 为 left、right、top 和 bottomo 

最 后 ， 每 个 轴 都 应 该 被 赋予 一 些 数据 。 为 了 完成 这 个 ， 需 要 从 存储 中 引用 一 个 字段 ， 就 像 @ 
标注 那样 。 请 记 住 ,在 左 侧 轴 上 ， 并 没有 赋予 一 个 字段 。ExtJS 会 自动 赋予 一 个 从 0 到 最 大 值 的 范 
围 ， 相 当 于 也 指明 了 步 长 ( step increment )。 其 中 最 大 值 是 依据 你 使 用 序列 中 最 大 值 计 算出 来 的 。 
如 果 没 有 指定 序列 ， 当 然 ， 在 应 用 程序 中 也 不 应 该 出 现 这 种 情况 最 大 值 会 被 设置 为 1。 下 一 
步 在 配置 序列 的 时 候 会 将 其 设置 为 一 个 固定 值 。 

就 像 在 图 10-11 中 看 到 的 那样 ， 轴 都 像 我 们 想象 的 那样 被 放置 好 了 。 数 字 轴 (Values ) 像 期 望 
的 那样 被 绘制 出 来 并 体现 出 来 不 指明 序列 所 带 来 的 缺陷 。 另 一 方面 ，Matrix 轴 缺少 一 些 表 现 。 
February 、September 和 November 它们 中 拥有 最 高 值 的 名 字 一 一 已 经 从 该 图 中 消失 了 。ExtJS 
会 自动 来 分 配 空间 以 显示 尽 可 能 多 的 标签 。 





















































Our First Ext JS Chart 口 |X 


Values Axis 





0 二 T T T T T T T T T T 1 
January March Aprl May June July August October ”December 





Metrics Axis 





图 10-11 绘制 在 表面 上 的 轴 
为 了 显示 所 有 标签 ， 必 须 旋转 它们 来 垂直 显示 。 像 下 面 这 样 指 明 标 签 的 配置 : 


{ 














type: 'Category', 
position: 'bottom', 
fields: 'name', 

title: 'Metrics Axis', 
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label: { 
rotate: { 
degrees: 270 
} 
} 
} 


瞧 ， 就 和 网 10-9 中 演示 的 一 样 ! 除了 旋转 ,标签 可 以 被 定制 来 显示 指定 的 颜色 和 字体 。 你 其 
至 可 以 使 用 一 个 演 染 器 自 定义 值 的 格式 。 





10.7.2 ”添加 序列 


除非 为 该 图 表 添 加 序列 ， 和 否则 轴 都 是 没 用 的 。 从 随机 生成 的 数据 集中 ， 会 选取 aatal 项 并 显 
示 它 是 怎样 随 着 月 份 (name 属 性 ) 变化 而 变化 的 。 接 下 来 , 在 已 经 创建 的 chart ( 代码 清单 10-7 ) 
的 axes 配 置 后 添加 了 series 的 数组 。 


代码 清单 10-8 配置 序列 


series: [ a 配置 线 型 图 
{ 
type: 'line', 9 设置 左 侧 轴 


axiss Teft"™, 


























xField: 'name', 
yField: 'datal' SE 设置 水 平 轴 字段 


} 设置 垂直 轴 字 段 


] 
首先 , 需要 决定 该 图 表 的 类 型 @Q@。 序 列 的 选择 是 线 (line )， 会 将 它 绑 定 到 左 侧 轴 仿 。 现 在 只 
需要 配置 存储 字段 中 的 名 字 来 与 X 轴 合 和 7Y 轴 人 @@ 相 对 应 。 在 绝 大 多 数 情 况 下 , 后 面 这 两 项 配置 会 与 























X 轴 和 Z 轴 的 配置 相 一 致 。 图 10-12 显 示 了 结果 。 
Our First Ext JS Chart Ox 
90 - 
a 
83 
76 二 9 
69 
EE 62 -| ’ 本 
奶 55- 
3 
而 48: 9 
> 
41. a 
34- 
27 .| 
i i EE 
a 
0 z 口 
Metrics Axis 


图 10-12 Series 就 像 配置 的 那样 被 绘制 出 来 了 
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看 起 来 很 漂亮 , 不 是 吗 ? 还 请 注意 ,月 份 标签 在 这 里 被 垂直 显示 以 获得 额外 空间 。 然 而 , 图 
表 还 需要 其 他 处 理 ， 比 如 在 这 种 方式 下 很 难 比较 5 月 份 和 10 月 份 。 如 果 使 用 网 格 线 的 话 会 容易 得 
多 , 这 是 轴 的 一 个 功能 , 将 向 7 锅 中 添加 它们 。 还 需要 用 刻 ) 度 线 在 ) 币 中 标识 大 ` 刻 度 。 总 体 来 说 ， 
需要 10 个 大 刻度 ,并且 在 每 两 个 大 刻度 对 之 间 还 有 5 个 小 刻度 。 

青 仔 细 看 下 图 10-12， 看 看 7 轴 是 从 哪儿 开始 的 。 管 案 是 : 数字 20。 这 个 是 自动 (计算 出 来 ) 
的 ， 因 为 这 是 存储 记录 中 的 最 小 值 。 如 果真 打算 这 么 做 的 话 ， 也 可 以 强制 设置 该 值 。 































































































10.7.3 ”改进 可 视 化 助手 


伙计 们 ， 还 没完 。 让 我 们 来 说 下 最 令 你 感到 挑战 性 的 : 确保 7 种 显示 保留 一 位 小 数 的 数字 。 
现在 ， 让 我 们 来 看 下 下 面 的 代码 清单 。 


代码 清单 10-9 ”在 7 轴 上 改进 可 视 化 助手 
{ 


type : 'Numeric', 
position = 

fields + [datal’)s 
title : 'Values Axis', 
Grid : true, 

minimum 0 


minorTickSteps: 5, 
majorTickSteps: 10, 
label 5 一 六 
renderer: Ext.util.Format.numberRenderer('0,0.0') 


} 
} 


这 个 真 的 很 直接 , 但 是 你 没有 使 用 可 视 化 助手 。 让 我 们 向 图 表 中 添加 一 些 交互 。 首 先 ， 配置 
该 序列 来 为 每 个 值 显示 一 个 十 字 【 而 非 点 )， 就 像 下 面 代码 清单 中 所 做 的 那样 。 


代码 清单 10-10 “定义 标记 配置 


markerConfig: { 














type :OES 
size 人 
radius A 


'stroke-width': 0 
3 


在 代码 清单 10-8 的 这 个 序列 的 配置 对 象 中 ， 在 yField: 'datal' 之 后 ,创建 了 一 个 新 的 成 
markerConfig， 它 接受 一 个 和 Ext .draw.Sprite 几 乎 完全 相同 的 配置 (作为 参数 )。 唯 
的 区 别 是 在 gxt .chart .Shape 单 例 中 预定 义 的 这 个 type 属 性 。 可 选 类 型 如 下 : 

QD Circle 






































et 











D Line 
口 Square 





D Triangle 
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口 Diamond 
口 Cross 


口 PLus 





口 Arrow 

每 个 十 字 都 要 比 之 前 用 过 的 点 更 大 一 些 , 这 使 得 用 户 可 以 更 容易 地 将 鼠标 放 上 去 。 让 我 们 来 
为 数字 线 序列 添加 下 面 的 代码 块 来 使 其 可 以 高 亮 显 示 (代码 清单 10-8 ): 

highlight: { 


size: 7， 
radius: 7 








小 

还 可 以 设置 highlight 为 true 来 显示 默认 的 高 亮 分 辨 率 ， 但 是 在 最 近 定 制 的 子 画面 中 你 指 
定 了 高 亮 的 数值 ， 而 不 是 高 亮 分 辩 率 。 

如 果 要 添加 很 好 的 提示 来 显示 被 选 值 的 话 ， 鼠 标 悬 浮 高 亮 将 会 变 得 更 加 有 意义 : 


























tiDSs 
trackMouse: true, 
width a 
height 2 8 


renderer : function(record, item) { 
this.setTitle(record.get ('name') 
+ record.get('datal') + ' Customers'); 


i 


} 
现在 在 浏览 右上 跑 一 下 这 个 图 表 ， 会 看 到 如 图 10-13 所 示 的 内 容 。 


Our First Ext JS Chart 口 |X 
100.0 





April: 90 customers 


Values Axis 
要 








00 T a T T 用 OE 站 
这 Fy 5 时 Fy 2 Ey 蕊 5 5 5 5 
-0 
5 号 < 三 名 2 3 
一 2 EF © © 

多 二 口 
Metrics Axis 


图 10-13 ”对 7 轴 和 序列 的 可 视 化 改进 
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它 看 起 来 不 错 。 记 号 标记 和 网 格 线 都 在 这 里 ，Value 轴 标签 从 0 开始 并 显示 了 一 位 小 数 。 十 字 
已 经 取代 了 圆 点 ， 屏 幕 就 像 图 10-13 显 示 的 那样 ， 线 是 高 亮 的 ， 强 调 了 被 选 的 十 字 ， 等 等 。 最 后 ， 
将 鼠标 指针 指向 一 个 十 字 将 会 显示 它 记 录 的 值 。 

让 我 们 将 下 面 代码 清单 中 的 所 有 片段 放 在 一 起 ,来 复习 下 我 们 用 来 显示 图 中 图 表 的 完整 代码 。 


代码 清单 10-11 完整 的 线 型 图 表 配 置 
Ext .create('Ext.chart.Chart', { 


store: store, 
background: { 
































下 二 二 开光， 二 非 二 下 下 2 
Fy 
items 下 
type a 
本 生 期 #2 
path 7 M200 400 TE. 258 281, T054609, .29095 L469 :141 281 -2 
基地 
axes: [ 
{ 
type : 'Numeric', 
position 2 TESEEtY, 
fields % [ataL sy 
title : 'Values Axis', 
Grid : true, 
minimum Os 


minorTickSteps: 5, 
majorTickSteps: 10, 
label > { 
renderer: Ext.util.Format.numberRenderer('0,0.0') 


type: 'Category', 
position: 'bottom', 
fields: 'name', 
title: 'Metrics Axis', 
label: { 
rotate: { 
degrees: 270 





} 


} 
]> 
series: [ 
{ 
type: 'line', 
highlight: { 
size: 7， 
radius: 7 
sy 
axis: 'lJeft', 
xField: 'name', 
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yField: 'datal', 
title: '% Returning Customers', 
markerConfig: { 
type: 'cross', 
size: 4, 
radius: 4, 
'stroke-width': 0 
i 


tipe: 并 
trackMouse: true, 
width 2 .50 
height 和 
renderer : functionl(record, item 


) { 
this.setTitle(record.get ('name') + ': "+ 


record.get('datal') + ' customers'); 


} 


yy: 
在 下 一 他， 你 将 会 用 已 经 学 习 到 的 Extdraw 知 识 来 定制 一 些 形 状 并 用 它们 来 增强 这 个 图 表 。 


10.7.4 添加 定制 形状 


你 已 经 创建 的 图 表 是 一 个 被 子 画 面 填充 的 表面 。 通 过 多 种 途径 ,已 经 访问 过 子 画 面 的 配置 ， 
不 是 通过 通常 的 items 属 性 ， 而 是 通过 axis、 series, ee 这 并 不 意味 着 
items 属 性 是 不 可 访问 的 , 事实 正好 相反 。 在 下 面 的 代码 清单 中 , 会 使 用 它 来 添加 一 个 定制 的 形 
状 到 图 表 中 。 


代码 清单 10-12 ”添加 一 个 定制 的 子 画 面 



























































items cd et 
type paEh.,; 
生计 汪汪 : "#fEf2C0, 
path ;tM 200 工 00 T°258. 281 105. 169° 295 169 141 28 包 ' 


} 


items 属 性 可 以 用 和 Ext .draw .component 相 同 的 方式 来 使 用 。 毕 况 ， 图 表 继 承 自 它 。 在 这 
里 使 用 了 和 代码 清单 10-6 创 建 的 相同 的 星 形 。 比 较 这 两 个 代码 清单 ， 你 会 注意 到 它们 的 不 同 点 在 
于 path 属 性 。 这 是 为 什么 呢 ? 如 果 你 想 自 己 弄 清楚 请 暂停 一 下 。 

当 Ext .chart .Chart 扩 展 Ext .araw.Component 时 ， 默 认 的 viewBox 配 置 为 false。 这 意 
味 着 在 X 轴 和 7 轴 平 面 没有 自动 定位 。 取而代之 的 是 , 每 一 个 坐标 都 是 绝对 的 , 必须 依 此 自己 安排 
自己 的 子 画面 。 图 10-14 显 示 了 在 图 表 中 的 星 形 。 

让 我 们 进一步 定制 形状 ,并 用 星 形 替换 掉 十 字 ( 代码 清单 10-13 )。 这 次 一 个 简单 的 配置 就 不 
够 了 。 必须 在 Ext .chart .Shape 单 例 中 注册 一 个 新 的 形状 , 这 将 是 一 个 使 用 Ext JS 新 的 类 系统 的 
好 做 法 。 
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Our First Ext JS Chart 口 X 
100.0 


Values Axis 
a 
© 
[= 








T T T T T T 1 
号 二 二 车 名 省 区 曙 血 甘 里 
2 
站 三 三 三 昌 8 加 8 
[rs 名 9 名 
pb 过 口 

Metrics Axis 











图 10-14 在 一 个 图 表 上 泻 染 出 的 定 浊 





NS 
六 








代码 清单 10-13 ”定制 标记 安装 
Ext .chart.Shape.self.overridel({ 
star: function (surface, opts) { 
return surface.add (Ext.applyIf ({ 


type pat 
path MO st D6 8 e903 TO ss -0608 2"y 
'stroke-width' : 0， 

} ;OptS)); 


} 
}); 
为 了 访问 一 个 单 例 的 override 属 性 一 一 这 是 Ext JS 新 的 类 系统 带 来 的 糖果 一 一 必须 首先 访 
问 它 的 self 属 性 。 在 代码 清单 10-13 中 ， 将 添加 一 个 新 的 方法 ( star )， 它 将 代表 一 个 新 的 标记 
配置 类 型 。 

路 径 需 要 再 次 调整 。 这 次 每 个 星 形 都 应 该 放置 到 每 个 点 的 中 心 ， 因 此 也 就 是 像素 点 的 调整 。 
最 后 ， 在 每 个 星 形 绘制 完成 后 没有 中 断 边线 。 可 以 通过 给 star 方 法 传递 opts 参 数 来 访问 所 有 的 
这 些 子 画 面 。 让 我 们 将 star 插 入 到 标记 配置 中 : 


























markerConfig: { 
type: 'star' 
} 


不 需要 进一步 的 配置 了 ， 这 就 是 全 部 内 容 。 现 在 跑 一 下 新 的 代码 ， 应 该 会 看 到 如 图 10-15 所 
示 的 内 容 。 

你 经 常 想 比较 一 下 两 个 或 多 个 不 同 数据 集 相 对 于 一 个 普通 值 的 关系 ， 比 如 月 份 。 我 们 接 下 来 
的 讨论 将 会 关注 这 一 点 。 
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Our First Ext JS Chart Dx 
10003 
90.0 3 杰 友 
3 友 
80.0 3 | 
3 
700 - 
| a 太 
让 
me | st 
S 40.0 六 X 六 
30.0 
200 次 
100 了 
00 十 一 一 


October 


September 
November 
December 


Metrics Axis 


图 10-15 ” 星 点 





10.7.5 同一 个 图 表 中 的 多 序列 


Ext .chart .Chart 中 的 序列 配置 是 一 个 Ext .chart .series.Series 实 例 的 数组 。 换 句 话 

说 ,一 个 图 表 可 以 包含 合理 数量 的 序列 ,这 在 共享 XY 机 7 平面 的 笛 卡 儿 类 型 图 表 中 通常 都 是 合理 的 。 
重用 之 前 已 经 完成 的 代码 ， 添 加 一 个 新 的 序列 配置 (参见 代码 清单 10-14 ) 来 代表 客户 的 数 

量 相 较 于 回头 客户 的 数量 。 

代码 清单 10-14 ”添加 序列 

pe 









































type: 'line', 
highlight: { 
size: 7， 
radius: 7 
hs 
axis: 'left', 
xField: 'name', 区 配置 不 同 数据 源 
yField: 'data2', 
markerConfig: { 


type: 'diamond' 
ee 二 添加 新 标记 类 型 


就 这 么 简单 ,已 经 添加 了 一 个 新 的 配置 对 象 来 负责 你 已 经 很 熟悉 这 个 配置 了 。 主 
要 的 变化 是 yrField 数 据 资源 @, 为 了 使 点 更 容易 被 追踪 , 这 个 序列 将 会 绘制 萎 形 人 而 不 是 值 ( 参 
见 图 10-16 )。 
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Our First Ext JS Chart Dx 
100.0 A 
90.0 
2 
80.0 办 
700 丰 
外 六 
过 600 友 不 
< 9 / 次 
多 500 
3 次 
而 400 g 广 三 次 
2 © 
30.0 - / o 
200 0 o $ - 友 
10.0 
00 - T T T T T T T T T T 1 
"0 
-0 
5 己 = z 三 8 加 8 
外 号 © oO 
ed 二 口 
Metrics Axis 


图 10-16 “多 线 型 序列 
看 起 来 不 错 ， 不 过 有 点 儿 乱 。 首 先 ， 哪 条 线 代 表 哪 组 数据 ? 调用 图 例 来 拯救 它 吧 ! 





legend: { 
bosition: top' 


} 


开启 图 例 并 将 其 放置 在 顶部 , 需要 为 必需 的 图 例 分 配 一 些 垂直 空间 。 图 例会 用 一 个 标记 样 例 
来 说 明 序 列 的 颜色 和 名 称 。 如 果 标 题 没 有 被 使 用 ,那么 相应 的 字段 名 就 会 被 显示 ， 就 像 在 
Ext .data.Model 中 指明 的 那样 。 做 如 下 的 两 处 更 改 : 


{ 


title: '% Returning Customers', 0 


title: '% New Customers', 




















} 


每 一 个 标题 都 在 各 自 的 序列 配置 当中 。 这 种 更 改 在 图 形 清晰 度 方面 可 能 不 会 令 人 满意 , 也 正 
因此 会 将 第 二 个 序列 (% New customer ) 置 于 一 个 面积 图 中 : 








type: 'area' 


这 次 改变 全 部 完成 了 吗 ? 当然 ! 请 参见 图 10-17。 
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Our First Ext JS Chart Ox 


六- % Returning Customers ” 闻 % New Customers | 


Values Axis 


vo 
挟 
EF 
EE 





Metrics Axis 
图 10-17 一 个 组 合 图 表 中 的 图 例 


更 具有 可 读 性 了 , 不 是 吗 ? 图 例 很 好 地 显示 了 每 个 序列 的 标题 , 通过 使 用 新 的 序列 类 型 让 这 
两 个 数据 集 的 差别 更 加 明显 了 。 面积 图 有 着 不 同 的 高 亮 机 制 , 它 会 显示 一 条 细小 的 黑色 线条 来 显 
示 其 在 水 平平 面 的 位 置 。 

所 以 , 现在 有 了 两 个 序列 : 一 个 蓝 色 的 线 型 图 和 一 块 儿 绿色 的 面积 图 。 然而, 我 们 从 没 提 到 
过 任何 关于 颜色 的 东西 ， 这 怎么 得 了 ?很 快 你 会 发 现 其 中 的 小 秘密 。 








10.8 定制 主题 


图 表 ， 作 为 数据 的 一 种 可 视 化 表示 ， 依 赖 于 图 形 形 状 和 颜色 。 轴 和 序列 满足 了 形状 的 需要 ， 
但 是 怎样 来 控制 颜色 呢 ? 答案 就 在 Ext .chart .theme 包 中 。 

这 个 包 中 有 两 个 主要 的 类 : Ext .chart.theme.Base 和 Ext.chart.theme。Theme.Base 
是 私有 的 ， 它 包含 了 默认 的 主题 配置 。Theme 类 用 来 定义 新 的 主题 。 

为 了 更 改 地 解释 该 配置 ， 先 浏览 下 默认 的 设置 。 下 面 的 代码 清单 显示 了 默认 配置 对 象 。 这 个 
代码 清单 实在 是 很 长 ， 所 以 请 保持 注意 力 。 如 你 所 见 ， 配 置 图 表 需 要 做 很 多 工作 ， 主 题 又 带 来 了 
新 的 工作 量 。 
代码 清单 10-15 “主题 配置 

background: false, 

axis: { 
stroke: '#444', 
'stroke-width': 1 
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axisLabelTop: { 
fill: '#444', 
font: '12px Arial, Helvetica, sans-serif', 
spacing: 2， 
padding: 5, 
renderer: function(v) { return v; } 
a 
axisLabelRight: { 
fill: '#444', 
font: '12px Arial, Helvetica, sans-serif', 
spacing: 2， 
padding: 5, 
renderer: function(v) { return v; } 
by 
axisLabelBottom: { 
fill: '#444', 
font: '12px Arial, Helvetica, sans-serif', 
spacing: 2， 
Dadding’ 5; 
renderer: function(v) { return v; } 
jy 
axisLabelLeft: { 
fill: '#444', 
font: '12px Arial, Helvetica, sans-serif', 
spacing: 2， 
padding: 5, 
renderer: function(v) { return v; } 
的 
axisTitleTop: { 
font: 'bold 18px Arial', 
fill: '#444' 
ja 
axisTitleRight: { 
font: 'bold 18px Arial', 
fill: '#444', 
rotate: { 
0 
degrees: 270 





和 
axisTitleBottom: { 
font: “Dold 80x Arlial,.; 
fill: '#444' 
}, 
axisTitleLeft: { 
font:, ‘bold 18px Arial', 
fill: '#444', 
rotate: { 
0 0 
degrees: 270 


3 
series: { 
'stroke-width': 0 
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局 
seriesLabel: { 
fonts TT AELal'y 
fi11: '#333' 
上 
marker: { 
stroke: '#555°', 
radius: 3, 
size: 3 
}3 
colors: [ "#94ae0a", "#115fa6","#a61120", "#ff8809", "#ffdl3e", 
"#a61187", "#24ad9a", "#7c7474", "#a66111"], 
seriesThemes: [{ 
fill: "#115fa6" 
Fy 
fill: "#94ae0a" 
jr 
fill: "#a61120" 
用 
jg 
markerThemes: [{ 
王 了 卫生 区 提 二 下 5 王 二 区 由 
type: 'circle' 
上 二 
fill: "#94ae0a", 
type: 'cross' 


} 


你 已 经 知道 了 图 表 是 子 画 面 的 一 个 分 支 ， 所 以 添置 一 个 新 的 主题 要 求 很 多 Ext.draw 技 巧 。 让 








我 们 复习 下 这 些 配置 属性 。 
口 backgrouna (背景 ): 始终 居于 底层 的 填充 ， 拥 有 最 低 的 z-index。 
D axis( 轴 ): 一 条 线 ， 代 表 一 个 轴 。 
口 axisLabelTop (顶部 轴 标 题 ) 、axisLabelRight( 右 侧 部 轴 标 题 )、axisLabelBottom 
( 底部 轴 标 题 )、axisLabelLeft ( 左 侧 轴 标 题 )， 分 别 是 每 个 轴 位 置 的 标签 。 











口 axisLabelTop (顶部 轴 标 题 )、axis] 
(底部 轴 标 题 )、axisLabel1 
Dse 默认 轴 配 置 。 
Dse 


D ma 














ries: 





默认 标记 。 


rker: 





Dse 


口 ma 


ries] 














rker] 


立 | 
日 











LabelRight ( 右 侧 


轴 标 题 )、axisj 























riesLabel: 序列 中 每 个 值 的 标签 。 





eft【〈 左 侧 轴 标 题 )， 都 是 轴 标 题 。 


口 colors: 十 六 进 制 颜色 ， 序 列 的 数组 索引 和 颜色 的 数组 索引 相同 。 
rhemes: 序列 的 绘图 配置 ， 同 colors 的 数组 配置 规则 相同 。 
rhemes: 标记 的 样式 ， 和 colors 的 数组 配置 规则 相同 。 


LabelBottom 
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我 们 确信 ， 理 解 Ext .draw.Sprite 的 配置 将 会 在 创建 新 的 主题 时 更 加 轻松 。 让 我 们 来 为 图 
表 实 现 一 个 定制 的 主题 ， 如 代码 清单 10-16 所 示 。 


代码 清单 10-16 ”配置 春天 主题 ( Spring ) 





Ext .define('Ext.chart.theme.Spring', { 
extend: 'Ext.chart.theme.Base', ww 定义 春天 主题 类 (Spring) 
constructor: function(config) { 
Var axisColor = '#610519'，; 
config = Ext.apply({ 扩展 基本 主题 类 (Base) 
axis: { 


fill: axisColor， 
stroke: axisColor 
和 
axisLabelLeft: { 
fill: axisColor 
Fs 
axisLabelBottom: { 
fill: axisColor 
ys 
axisTitleLeft: { 
fill: axisColor 
} 
axisTitleBottom: { 
fill: axisColor 








jy 
Colors: ['#6695CC', '#65ed73'], 


seriesThemes: [{ 
fi11: "#CC7200", 
stroke: “#3FCC00 


}, { 
fil11l: "#610519" 


}], 


markerThemes: [{ 
stroke: '#f00' 0 
} 


}, config); 
this.callParent ([config]); 


站 


将 该 主题 称 为 Spring@。 一 个 新 的 类 必须 扩展 Ext .chart .theme.Base@， 这 是 被 强制 的 。 
之 后 ， 事 情 变 得 直接 了 。 绝 大 多 数 工作 (参见 图 10-18 ) 都 是 用 fi11 ( 填充) 和 stroke (边线 ) 
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六 %Returning Customers ” 间 % New Customers | 








中 
四 
刁 
中 
名 
a 
轩 


Metrics Axis 











图 10-18 ”运行 的 新 主题 


当 我 们 准备 讨论 图 表 的 时 候 , 往往 都 已 经 讨论 过 第 卡 儿 类 型 。 它 们 共享 一 个 相似 的 配置 , 它 
们 都 包含 轴 。 接 下 来 ,我 们 尝试 实现 一 个 无 轴 的 图 表 。 


10.9 ”人 饼 图 


当 我 们 要 观察 一 个 值 在 总 体 中 的 比重 时 , 经 常会 换 用 饼 图 。 它 们 不 会 从 轴 中 得 到 便利 , 但 是 
会 和 数据 集中 的 其 他 数值 进行 交互 。 在 这 个 例子 中 , 你 将 会 重用 相同 的 数据 存储 , 但 限制 了 数据 
的 数量 。 在 同一 个 序列 中 存在 太 多 的 数据 会 使 图 表 非 常 凌乱 。 

饼 图 会 有 一 个 图 例 和 在 每 个 分 片 里 被 写 人 的 标签 。 分 片 将 会 对 鼠标 悬浮 做 出 反应 并 将 所 选 分 
片 移出 边界 ， 就 像 代 码 清单 10-17 中 那样 。 


代码 清单 10-17 ”配置 数据 存储 ， 泻 染 图 表 


var store = Ext.create('Ext.data.JsonSstore', { 


fields: ['name', 'datal'], 

data: generateData(4,30) 
); 4 生成 小 数据 集 
Ext .create('Ext.chart.Chart', { 

animate : true, 

store : store, 

shadow : true, 0 设置 图 表 填 充 

insetPadding : 10， 

legend ge 


position : 'bottom' 


}, 
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background ci 
fiLL st#EEE' 配置 饼 图 类 型 
上 
series 中 
{ 连接 模型 
a 人 Hn 
donut 97 
showInLegend : true 
tips 人 
trackMouse : true 图 例 中 显示 类 别 
width 150.; 
height 2 
renderer : function (record, item) { 


}); 





this.setTitle(record.get ('name') 


a 


} 
a 
highlight 2 


' + record.get ('datal')); 


segment : { 
margin : 20 
} 
有 
label 人 
field : 'name', 
display : 'rotate', 
contrast : true, 
font 3 OD RELaly 


} 
] 




















使 用 在 本 童 早 些 时 候 创建 的 数据 生成 右 , 创建 了 一 个 小 型 随机 数据 集 @。 然后, 创建 了 一 个 


图 表 并 保证 为 饼 留 够 空间 @@ 来 完成 鼠标 悬浮 效果 。 没 有 创建 任何 轴 , 这 没 问 题 ,给 定 的 序列 类 型 























是 pie 四 。7 和 了 孝 不 存在 ， 所 以 没有 xEFielda 和 yFielda， 只 需要 模型 的 fielq 名 赋 给 fiela 就 可 


以 了 @。“ 和 孔 ” 是 一 个 donut ， 赋 一 个 以 像素 为 单位 的 值 来 作为 它 的 半径 @。 最 后 ， 指 示 序 列 需 


要 显示 图 





例 @。 








看 起 来 需要 花费 一 些 功夫 , 但 是 一 旦 你 学 会 了 创建 基本 的 图 表 , 就 可 以 利用 这 些 知识 创建 任 


何其 他 类 








型 的 图 表 。 饼 图 与 第 卡 儿 类 











型 的 图 表 最 大 的 不 同 在 于 与 轴 的 关系 。 智 能 配置 使 它们 更 加 


简单 。 让 我 们 来 看 看 刚刚 做 了 什么 ， 参 见 图 10-19。 
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加 January 图 February 图 March 国 April 


图 10-19 ”人 饼 图 


看 , 并 不 是 那么 困难 ,， 它 看 起 来 很 漂亮 。 你 可 以 很 清楚 地 看 到 ,在 第 一 学 期 January 的 数值 是 
最 小 的 ， 如 果 你 在 标签 上 多 做 一 些 工作 ， 甚 至 可 以 看 到 是 多 少 。 我 们 将 它 留 作 你 的 家 庭 作 业 。 


























10.10 小结 


本 章 介绍 了 绘图 的 基础 知识 。 绘 图 是 Ext JS 4 引入 的 一 个 新 概念 ， 为 了 在 浏览 器 中 保证 一 臻 
性 ， 它 经 常 与 Flash 结 合 使 用 。Ext.draw 证 明 ， 通 过 一 个 简单 的 API， 我 们 很 容易 实现 优秀 的 、 跨 
浏览 器 的 绘图 。 

绘图 是 学 习 创建 邻 人 惊艳 的 图 表 的 良好 基础 。 不 仅 图 表 基 于 Ext.draw 包 ， 而 且 创 建 高 级 图 表 
高 度 要 求 熟悉 绘图 概念 。 在 你 创建 自己 的 第 一 个 主题 时 ， 应 该 已 经 很 清楚 地 了 解 了 这 一 点 。 

本 章 慢 慢 创 建 一 个 图 表 ， 循序 渐进 介绍 了 Ext.chart 图 表 配 置 背 后 的 主要 概念 。 你 从 一 个 小 小 
的 简单 示例 出 发 ,建立 了 一 个 定制 主题 是 具有 动画 的 可 交互 图 表 。 这 些 原则 适用 于 任何 序列 类 型 。 

另外 ， 你 学 习 了 隐藏 在 Ext.draw 和 Ext.chart 源 码 背 后 的 很 多 技巧 。 如 果 你 磁 到 什么 麻烦 ， 不 
要 害怕 深入 查看 这 些 代 码 。 这 点 对 于 在 使 用 Ext JS 过 程 中 碰 到 的 所 有 问题 都 适用 。 

下 一 章 是 一 个 我 们 非常 喜欢 的 主题 一 -Ext Direct。 你 会 通过 Ext JS 深 入 学 习 直 接 远 程 调用 
(direct remoting ) 技术 。 

















用 Ext Direct 实 现 远程 方法 
卦 用 





本 章 内 容 

口 建立 Ext Direct 服 务 器 和 客户 端 

口 直接 调用 方法 

口 通过 Ext .data.store 使 用 Ext Direct 














前 面 几 章 介 绍 了 如 何 用 网 格 、 树 形 面板 、 表 单 ， 甚 至 模板 (XTemplate ) 等 部 件 和 服务 顺 进 
行 数据 交换 ， 并 让 你 使 用 Ext .aqata.Sstores 和 Ext.Ajax.redquest 和 服务 器 通信 。 如 果 已 经 在 
工作 中 使 用 了 一 段 时 间 的 Ext JS 4， 你 会 知道 建立 Ajax 请 求 来 创建 、 读 取 、 更 新 和 删除 数据 时 ， 
可 以 在 配置 过 程 中 做 得 很 精准 细致 , 但 同时 也 会 很 难处 理 。 为 每 个 操作 的 成 功 和 失败 回调 操作 在 
服务 器 端 和 客户 端 书写 代码 都 将 大 大 增加 代码 量 , 更 不 用 提 这 些 需要 URL 路 径 和 变量 来 区 分 操作 
的 代码 的 数量 了 。 

要 减少 服务 器 端 代 码 数量 ， 通 常 的 做 法 是 调用 一 个 RESTful 接 口 。 在 客户 端 呢 ， 存 储 和 
Ext .data 包 会 自动 完成 CRUD 处 理 的 绝 大 多 数 工 作 ， 并 简化 开发 者 的 工作 。 但 是 美国 加 利 福 尼 
亚 州 雷 德 伍德 城 聪明 的 开发 者 们 在 此 基础 上 领先 了 一 步 。 

远程 过 程 调用 (RPC )， 也 就 是 远程 方法 调用 ， 是 一 个 为 人 所 熟知 的 在 平台 间 共 享 程 序 代码 
的 技术 。Ext Direct 是 一 个 将 远程 服务 器 端 方法 带 到 客户 端的 平台 。 这 个 灵活 的 、 高 可 扩展 的 技术 
几乎 与 所 有 可 以 增强 Web 应 用 的 服务 器 端 平台 兼容 。 

本 身 作为 一 层 , Ext Direct 被 很 漂亮 地 集成 到 其 他 框架 中 。 虽然 它 的 服务 被 很 频繁 地 提供 给 数 
据 存储 ( Ext .data.proxy .Direct ) 调 用 , 但 是 远程 可 调用 的 方法 对 于 直接 执行 也 是 可 访问 的 。 

本 章 介 绍 如 何 搭 建 服务 右 端 环境 并 在 Ext JS Web 应 用 中 充分 发 挥 平台 优势 。 我 们 还 会 探究 Ext 
Direct， 以 便 在 减少 数据 管理 方面 的 应 用 代码 。 


11.1 使 两 端 相 见 


Ext JS 4 的 Ext Direct 包 存在 于 客户 端 ， 但 是 它 依赖 于 服务 咒 端的 支持 。 客 户 端 主要 负责 构建 
请 求 和 处 理 响 应 。 它 通过 多 种 接口 来 完成 这 些 任 务 ， 例 如 Ext .aata.Store 或 者 直接 方法 调用 。 
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BH 


相对 于 传统 的 通信 机 制 而 言 , Ext Direct 的 独特 之 处 在 于 服务 器 端 。 让 我 们 从 更 广阔 的 视角 看 下 该 


通信 流程 是 怎样 工作 的 ( 见 图 11-1 )。 





East 
Name < Last Updated ~ Phone 
3 Group Label 
Alok Jain 12/31/2010 (123) 456 - 0783 
更 新 触发 @ Alok Jain 123172010 局 (123) 456 - 0783 
存储 同步 
Alok Jain Update et 456 - 0783 
Alok Jain IaUeog Uizal 456 - 0783 
Aiox Jain 12/31/2010 (123) 456 - 0783 
Alok Jain 12/31/2010 (123) 456 - 0783 
Tab Label 
ey 世 
mr 
路 由 器 : 向 路 由 器 @y ”人 12 人 @@ 格式 化 响应 
ys,. » ». » 3 
提出 格式 化 请 求 慑 六 返回 客户 端 
二 有 
2 
乙 E 
> 
万 Ey 
Hy 荆 





























路 由 器 路 由 器 
该 取 请 求人 @ 路 出 加 © 格式 化 响应 
路 由 器 方法 向 路 由 器 
调用 方法 9 © 返回 数据 
方法 
@ 方法 执行 


图 11-1 Ext Direct 的 通信 流程 


一 切 都 起 始 于 Web 应 用 客户 端 上 的 一 次 方法 调用 @。Ext Direct 将 其 
台中 ， 并 将 其 发 往 路 由 器 合 。 路 由 器 在 该 工作 流 中 是 一 个 特殊 的 机 制 。 





@@ 响应 应 用 于 模型 





里 装 到 了 一 个 JSON 对 象 


它 知道 怎样 和 Ext Direct 
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进行 对 话 , 它 还 知道 暴露 的 方法 在 服务 器 端的 具体 位 置 及 如 何 与 它们 进行 通信 。 它 监听 来 自 客户 
端的 请 求 , 找 出 需要 的 方法 并 转发 参数 给 它 @。 方法 @ 会 完成 自己 的 工作 并 将 值 返回 @ 给 路 由 带 
@@。 该 路 由 融会 构建 男 外 一 个 (与 之 前 收 到 的 很 相似 的 ) JSON 对 象 @。 这 个 新 的 对 象 包含 了 远 
程 方 法 @ 返 回 的 数据 。 最后, Ext Direct 异 步 地 收 到 该 响应 @ 并 通过 一 个 回调 系统 将 值 返 回 给 原始 
调用 者 。 记 住 ， 这 整个 过 程 都 是 异步 的 。 
这 是 过 程 处 理 的 简化 解释 。 这 9 步 中 的 每 一 步 都 有 更 多 的 内 容 ， 我 们 将 会 在 本 章 逐 一 探讨 。 

这 些 原 则 展示 了 RPC 在 Ext Direct 中 的 特殊 性 ， 强 调 了 路 由 器 的 作用 。Ext JS 4 得 到 了 其 他 通信 类 
型 很 好 的 支持 ， 其 中 之 一 就 是 著名 的 RESTful 接 口 。 让 我 们 看 看 开发 者 是 怎样 权衡 这 两 者 并 选择 
其 中 哪 一 个 应 用 在 他 们 的 项 目 中 。 


















































11.2 对比 Ext Direct 和 REST 


在 深入 了 解 Ext Direct 之 前 ， 让 我 们 先 来 从 REST 的 视角 观察 RPC。 很 多 开发 者 之 前 都 使 用 过 
某 种 形式 的 RESTful 接 口 。 如 果 之 前 使 用 过 ， 你 可 能 注意 到 了 相似 点 和 不 同 点 。 

在 Ext JS 4 中 ， 对 REST 和 Ext Direct 的 支持 都 被 推 到 了 下 一 层 。 如 果 项 目 用 数据 存储 来 进行 所 
有 的 数据 管理 操作 ， 使 用 REST 和 使 用 Ext Direct 的 差别 不 会 太 明 显 。 那 是 因为 该 框架 已 经 使 得 它 
们 相同 ， 或 者 几乎 相同 。 

不 同 点 的 存在 基本 上 是 源 于 每 个 概念 的 架构 设计 。 表 11-1 比 较 了 Ext Direct 和 REST， 强 调 了 
主要 的 特性 ， 这 些 特 性 是 在 选择 将 该 技术 用 于 新 项 目 之 前 必须 考虑 的 。 


表 11-1 Ext JS 4 中 Ext Direct 和 REST 的 区 别 

































































































































































服务 器 端 配 置 路 由 器 建立 和 配置 类 路 由 器 行为 ， 各 种 实现 
客户 端 配置 需要 为 RPC 提 供 程序 的 初始 化 提供 独立 的 配置 不 需要 配置 

跨 域 支持 不 支持 (基于 Ajax ) 支持 

文件 上 传 通过 iFrame 提 供 支持 每 个 应 用 自己 设计 

比 次 请 求 ( 服务 器 端 ) 被 路 由 器 管理 需要 被 实现 

写 入 器 API CRUD 方 法 CRUD 路 径 

直接 方法 调用 ( 客户 端 ) 完全 授权 非 默 认 ， 方 法 需要 手动 创建 





Ext Direct 和 REST 之 间 最 明显 的 差别 在 于 它们 的 定义 。REST 以 接口 的 形式 存在 , 或 者 换 句 话 
说 ,以 你 可 以 提交 CRUD 操 作 的 URL 的 形式 存在 。Ext Direct 是 一 个 双向 平台 ， 需 要 同时 在 存在 于 
服务 器 端 和 客户 端 以 使 得 通讯 能 够 成 功 进行 。 它 们 都 可 以 将 方法 暴露 出 来 , 但 是 Ext Direct 使 得 服 
务 器 端 方法 对 于 客户 端 是 可 见 的 。 更 重要 的 是 ， 它 使 得 它们 变 得 可 执行 。 

Ext Direct 通 过 Ajax 调用 来 调用 远程 方法 。 唯 一 的 例外 是 文件 上 传 ， 它 通常 是 使 用 iFrame 来 定 
期 发 布 表单 请 求 。 这 种 方式 的 一 个 局 限 是 它 不 具备 跨 域 能 力 。 因 为 REST 是 属于 服务 器 端的 接口 ， 
所 以 它 可 以 被 框架 或 浏览 器 中 的 任何 有 效 的 交流 方法 所 使 用 。 
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批 次 请 求 是 一 个 有 趣 的 特性 。 虽然 它 需 要 路 由 器 的 支持 , 它 的 实现 是 集中 式 的， 所 以 服务 器 
端 开 发 者 不 需要 担心 它 。 不过，REST 开 发 者 可 能 需要 他 们 自己 完成 工作 , 它 依 赖 于 他 们 的 应 用 。 
在 一 些 情形 下 ， 每 一 个 URL 路 径 都 有 自己 的 批 支持 。 在 这 样 的 情况 下 ，Ext Direct 有 巨大 的 胜算 。 

在 使 用 代理 和 写 和 人 器 的 Ext.data 包 中 ， 设 置 将 不 会 有 明显 的 差别 。 你 甚至 可 以 充分 利用 
REST 的 批 请 求 ， 但 是 需要 在 服务 器 端 代 码 中 实现 它们 。 从 这 点 来 讲 Ext Direct 胜 出 ， 因 为 对 于 任 
何 调用 的 批 支持 都 是 被 实现 的 ， 在 这 点 上 RESTful 接 口 需要 为 每 次 调用 实现 批 支持 或 者 在 行为 前 
后 创建 一 个 类 路 由 器 。 

Ext Direct 和 REST 男 外 一 个 重要 的 不 同 点 是 在 其 他 情形 中 的 易 用 性 。 对 于 Ext Direct， 它 很 容 
易 通 过 JavaScript 来 调用 远程 方法 ， 对 于 REST 则 需要 客户 创建 ， 启 用 Ajax 封装 器 来 完成 类 似 的 任 
务 。 在 应 用 中 存在 太 多 这 样 的 代码 会 变 成 开发 者 的 趾 梦 ， 使 得 应 用 的 开发 和 维护 变 得 复杂 。 

到 目前 为 止 你 已 经 概览 了 隐藏 在 Ext Direct 背 后 的 理论 知识 ， 知 道 怎样 将 其 和 流行 的 RESTful 
接口 进行 比较 。 它 们 的 差异 之 处 也 正 是 它们 的 优势 。 让 我 们 从 服务 器 端 配置 开始 详细 讨论 。 


11.3 ”服务 器 端 配 置 


暴露 服务 器 端 方法 很 简单 , 配置 起 来 往往 也 不 复杂 。 如 果 你 非常 习惯 于 在 服务 器 平台 上 做 和 开 
发 , 那么 尝试 开发 对 Ext Direct 的 支持 是 个 好 主意 。 这 样 一 来 ,你 不 仅 能 为 自己 的 应 用 量 身 定制 解 
决 方案 , 还 能 更 好 地 理解 核心 原则 , 而 且 会 有 机 会 享受 扩展 Ext Direct 并 增强 其 威力 所 带 来 的 所 有 
便利 。 

否则 ,请 随意 浏览 并 从 http://mng.bz/8WkO 下 9 种 语言 的 30 多 个 服务 器 端 栈 中 选择 ， 每 个 栈 都 
各 有 特色 。 试 用 其 中 一 些 栈 会 让 你 知道 如 何 为 现 有 的 应 用 选择 最 合适 的 , 同时 了 解 一 些 特定 概念 。 
另外 ， 你 还 可 能 被 激发 自己 创建 栈 的 欲望 。 


11.3.1 它 是 怎样 工作 的 


服务 器 端 栈 负责 扮演 三 个 角色 ， 它 需要 : 
口 了 解 哪些 方法 应 该 被 暴露 出 去 ; 
口 用 信息 为 Ext Direct 生 成 API 描 述 ; 
口 监听 请 求 ， 路 由 它们 ， 将 响应 返回 给 客户 端 。 
为 了 使 Web 应 用 可 以 调用 到 远程 方法 ， 服 务 器 需要 一 个 懂得 两 端的 路 由 器 脚本 。 路 由 器 知道 
怎样 找到 你 决定 暴露 出 去 的 方法 ， 并 且 管 理 两 端 之 间 的 转换 。 











































































































11.3.2 “远程 方法 配置 


启用 Web 应 用 RPC 的 第 一 步 是 让 路 由 器 知道 哪些 方法 是 有 效 的 ， 怎 样 执行 它 们 。 路 由 器 开发 
者 在 选择 更 好 机 制 上 已 经 完成 了 创造 性 的 工作 。 有 这 样 一 些 方法 : 
口 使 用 配置 文件 〈 非 自动 、 最 不 具有 创新 性 ); 
口 要 求 整个 类 都 被 暴露 出 去 ， 用 类 常量 来 定义 怎样 和 类 进行 交流 ; 




















口 解析 置 于 方法 正 上 方 的 注释 并 寻找 API 样 式 的 关键 词 ; 

口 使 用 有 效 方法 中 的 完全 自动 测试 。 

根据 语言 的 不 同 ,一 些 特性 可 能 是 无 效 的 。 特 定语 言 决 定 了 配置 方法 的 一 些 方式 ,并 进而 决 
定 了 路 由 器 本 身 。 路 由 器 至 少 需要 以 下 信息 : 方法 名 和 期 望 的 参数 数目 。 额 外 的 信息 可 以 包含 安 
全 度量 、 执 行 前 /后 动作 、 类 型 转换 和 基于 过 滤 需 的 触发 需 。 


11.3.3 ”路 由 


路 由 器 接收 来 自 客 户 端的 请 求 ， 转 发 合适 的 方法 及 提供 的 参数 。 客 户 端 可 以 通过 JSON 格 式 
的 原生 HTTP 有 效 负载 提交 或 是 表单 提交 的 方式 来 发 送 请 求 。 需 要 上 传 文件 时 应 选择 后 者 ， 并 需 
要 分 发 多 次 请 求 。 

每 个 来 自 客 户 端的 事务 都 可 能 是 下 面 这 些 属 性 的 混合 。 

D action: 被 请 求 的 方法 所 在 的 类 。 

D method: 要 执行 的 方法 的 名 称 。 

D aata: 要 传递 给 方法 的 参数 。 

D type: 当前 设置 为 'rpc'。 

口 tid: 与 该 请 求 相关 的 交易 ID ， 在 批 请 求 时 是 必需 的 。 
表单 提交 重用 字段 的 名 字 ， 但 是 添加 前 置 关 键 字 ext: 
DQ extAction 

口 extMethod 

口 extTID 

口 extUpload (可 选 字段 ， 用 于 文件 上 传 ) 

任何 其 他 的 字段 都 可 以 被 认为 是 extMethod 的 参数 。 

在 大 多 数 情况 下 , 被 路 由 器 远程 调用 的 方法 都 会 返回 数据 。 基 于 使 用 的 语言 及 路 由 器 的 设计 ， 
它 会 捕获 被 调 方法 的 输出 或 接受 其 返回 的 数据 。 如 果 必 要 的 话 ， 该 数据 会 被 处 理 成 JSON 格 式 ， 
并 且 路 由 器 会 拼接 上 额外 的 元 数据 。 

口 type: 设置 为 'rpc' 

D tid: 交易 ID， 用 来 识别 返回 数据 。 
D action: 方法 所 在 的 类 。 

D methoq: 被 执行 的 方法 的 名 称 。 

D result: 结果 数据 对 象 的 根 节点 。 

如 果 该 请 求 是 被 批 次 初始 化 的 , 它 会 合并 结果 并 返回 一 个 响应 数组 。 如 果 该 请 求 是 一 个 表单 
提交 和 文件 上 传 ， 响 应 将 会 是 一 个 适当 格式 化 HTML 文 件 ， 该 文件 在 文档 体 中 只 包含 含有 同样 格 
式 化 的 JSON 对 象 的 一 个 多 行文 本 框 。 因 为 表单 提交 不 支持 批 次 ， 只 会 返回 一 个 响应 。 

路 由 顺应 该 捕获 异常 并 将 其 以 结构 化 的 响应 进行 转发 。 启 用 路 由 顺 的 可 配置 调试 模式 很 多 时 
候 都 是 一 个 很 好 的 主意 , 该 模式 决定 了 是 否 要 传输 异常 。 在 生产 环境 将 服务 器 端 异常 发 送 给 客户 
端 可 以 被 看 作 是 安全 问题 。 

































































































































































238 第 11 章 用 Ext Direct 实现 远程 方法 调用 








在 大 多 数 情 况 下 ， 你 会 使 用 一 个 有 效 的 服务 器 端 栈 ， 而 不 太 关 心 其 内 部 是 如 何 处 理 数据 的 。 
但 是 有 一 些 语言 (如 Node.js ) 并 没有 像 在 其 他 语言 中 存在 的 高 级 栈 , 因此 你 可 能 需要 开发 或 者 扩 
展 相 似 的 包 ( 如 socket.io 或 dnode )。 











注意 在 Node.js 中 调用 远程 方法 是 很 自然 的 事 ， 因 为 前 后 端 使 用 了 相同 的 语言 ， 还 得 益 于 其 本 
身 架 构 。 但 是 缺少 一 个 好 的 服务 器 栈 不 应 该 让 你 感 玛 家。 我 们 很 确定 ， 你 能 够 在 几 个 
小 时 内 创建 出 自己 的 基础 路 由 器 。《Node.js 实 战 》( 英文 版 由 Manning 于 2013 出 版 ) 在 这 方 
面 便 是 一 本 很 棒 的 参考 书 ， 我 们 强烈 建议 你 阅读 ， 因 为 Node.js 还 为 重用 JavaScript 代 码 提 
供 了 很 好 的 方法 。 


其 他 情况 下 或 许 需 要 覆盖 或 者 扩展 现 有 的 栈 ， 以 便 很 好 地 处 理 MVC 或 者 会 话 管理 。 你 刚 学 
习 到 的 内 容 对 于 该 任务 来 说 很 关键 。 

现在 有 了 一 个 准备 就 绪 的 工作 栈 ， 请 将 它 想象 为 一 个 足球 教练 。 你 不 能 没有 “他 ”， 但 是 
还 需要 运动 员 来 足球 , 需要 方法 来 执行 业务 逻辑 。 接 下 来 , 我 们 将 向 系统 中 添加 “运动 员 ”( 即 
方法 )。 
11.4 远程 方法 

现在 你 知道 了 怎样 使 服务 器 端 代码 有 效 , 现在 是 时 间 来 使 用 它 了 。 接 下 来 创建 一 个 简单 的 应 
用 来 完成 下 面 两 件 事情 : 
口 通过 一 个 直接 方法 调用 来 抓 取 一 个 服务 器 端 时 间 戳 ; 
口 在 Ext .data.wirter.Writer 的 帮助 下 通过 一 个 Ext .grid.Panel 来 启用 完整 的 CRUD。 


在 该 示例 之 后 , 你 将 使 用 Sencha 论 坛 中 的 一 个 有 效 的 服务 器 端 栈 。 我 们 倾向 于 选择 是 出 色 的 
J.Bruni ( Sencha 社 区 的 一 个 成 员 ) 用 PHP 实 现 的 Extremely Easy Ext Direct Integration。 


11.4.1 配置 路 由 器 


在 配置 路 由 需 之 前 ， 请 保证 服务 顺 端 方法 是 有 效 的 。 为 了 简单 起 见 ， 在 本 例 中 ,您 将 创建 两 
个 PHP 类 ， 并 将 它们 保存 在 一 个 文件 里 ， 就 像 下 面 代码 清单 中 显示 的 那样 。 


代码 清单 11-1 一 个 简单 的 远程 方法 
<?php 
class Util { 
public function date( Sformat ) { 
return datel( S$format ); 



























































} 
} 























代码 清单 11-1 新 建 了 一 个 名 为 Util 的 PHP 类 。 只 有 一 个 方法 属于 它 : date。 该 方法 是 公共 
方法 , 这 意味 着 它 在 外 部 是 可 访问 的 ， 它 期 望 单个 参数 :$format。 该 方法 的 唯一 目的 就 是 返回 
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一 个 代表 当前 日 期 和 时 间 的 字符 串 ， 并 按照 传人 的 参数 进行 格式 化 。 
该 方法 满足 了 通过 一 个 直接 方法 调用 在 服务 器 端 生成 一 个 时 间 戳 的 需求 。 在 下 面 的 代码 清 
中 ， 你 将 创建 另外 一 个 类 来 支持 网 格 的 CRUD 方 法 。 


代码 清单 11-2 一 个 远程 CRUD 类 
class Actors { 
public function create($config) { 
return Array( 
"success"=> true, 
"data"=>Array ("name"=>"New Actor", "id" => rand(1,22000)) 





} 


public function read( Sconfig ) { 
return Array ("success"=> true, "data"=>Array( 


ATrTay ( 
We => rand(1,22000)，, 
"name" => "John Travolta" 
3 
ATrTay ( 
(Td = .Tand( ly22000)> 
"name => "Benny Hill" 
) 
ATrTay ( 
ee > Tranc( ;22000) 7 
"name => "Bruce Willis" 
J 
ATrTay ( 
we = Land(l ;22000) 
"name => "Rowan Atkinson" 


} 


public function update( S$config ) { 
return Array ("success"=>true, "data"=>$config); 


} 


public function destroy( S$config ) { 
return Array ("success"=>true); 
3 
} 


代码 清单 11-2 新 建 了 一 个 类 ， 它 包含 4 个 公共 方法 : create、read、update、destroy。 
它们 均 不 做 什么 实际 工作 ， 只 是 向 客户 端 返 回 最 少 的 需求 信息 。 实 际 上 ， 这 4 个 方法 在 需要 的 时 
候 会 做 验证 ， 与 数据 库 交 互 ， 然 后 返回 来 自 数据 库 的 响应 以 完成 该 业务 。 

如 果 已 经 下 载 了 该 PHP 路 由 器 ， 现 在 是 时 间 将 其 插入 了 。 你 会 将 该 服务 器 端 栈 API 包 括 在 间 
创建 的 路 由 器 中 并 配置 它 ， 就 像 下 面 的 代码 清单 显示 的 那样 。 
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代码 清单 11-3 Router 配置 
<? 
require 'ExtDirect.php'; 


ExtDirect::S$Snamespace = 'RPC'，; 
ExtDirect::S$descriptor = 'RPC.REMOTING API'; 
ExtDirect::S$enableBuffer = 200; 


这 个 路 由 器 的 配置 相当 简单 : 返回 rpc.php 文 件 的 开始 ， 并 将 ExtDirect.php 文 件 的 引用 追加 进 
去 。 你 是 对 的 ，ExtDirect.php 是 该 栈 的 路 由 需 文 件 。 将 该 路 由 器 文件 包含 到 rpc.php 文 件 中 可 以 保 
证 该 路 由 器 的 API 是 有 效 可 用 的 。 

路 由 器 只 有 很 少 的 几 个 配置 选项 。 但 是 此 时 此 刻 只 需 配置 要 在 客户 端 使 用 的 命名 空间 和 Ext 
Direct 描 述 符 。 后 者 将 被 用 来 通知 你 已 经 使 之 生效 了 的 方法 的 Ext Direct。 

为 你 想 使 应 用 变 得 更 加 智能 并 通过 批 请 求 来 重用 资源 , 所 以 会 启用 缓存 并 将 其 设置 为 200ms。 

现在 已 经 成 功 配 置 好 了 了 RPC 服务 器 端 路 由 器 。 该 独 有 的 安装 将 会 明白 所 有 的 公共 方法 都 会 被 
置 为 有 效 的 ， 并 收集 需要 的 参数 的 个 数 ， 而 且 会 在 Web 应 用 请 求 它 的 时 候 重 新 配置 该 API 描 述 。 

旅程 继续 进行 到 客户 端 。Ext Direct 需 要 知道 怎样 执行 操作 、 路 由 器 在 哪里 、 可 以 远程 调用 哪 
些 方法 。 它 会 使 用 到 你 刚才 已 经 探索 过 的 配置 ， 详 情 我 们 稍 后 介绍 。 

















































































































11.4.2 ”启用 Ext Direct 


Ext .direct .Manager 主 管 客户 端的 Ext Direct。 它 的 工作 是 为 要 使 用 的 每 个 提供 程序 
( provider ) 创建 、 缓 存 和 管理 实例 。 现 在 存在 两 个 不 同 的 提供 程序 .PollingProvider 和 
RemotingProvidero 
Ext .direct .PollingProvider 有 一 个 责任 : 在 可 配置 的 时 间 间 隔 执 行 一 个 简单 的 远程 方 
法 。 它 还 按照 预定 义 的 规则 (在 一 个 回调 函数 中 指定 ) 来 处 理 信息 。 一 个 示例 情景 是 登 人 服务 器 
使 其 知道 一 个 用 户 依 然 在 线 ， 并 在 同时 刷新 需要 传送 给 用 户 的 信息 的 可 见 性 。 

男 一 方面 ，Ext .direct.RemotingProvider 根 据 需 要 调用 远程 方法 。 它 通常 用 来 和 
Ext .data.Store 相 连 ,， 包括 读 取 髓 和 写 入 器 。 它 的 使 用 模式 和 PollingProvigder 很 相似 ,我 
们 会 集中 在 另 一 个 示例 中 讲述 

让 我 们 来 看 下 图 11-2 中 两 个 提供 程序 的 主要 区 别 。 最 显著 地 ，Po1l1ingProvider 在 给 定 的 
时 间 间 隔 重 复 一 个 请 求 。 它 将 会 重复 这 种 方式 直到 被 强制 停止 。 Remot ingProvider 在 客户 端 创 
建 了 一 个 远程 方法 的 别名 。 只 有 当 客 户 端 方法 被 调用 了 , Ext Direct 才 会 发 送 一 个 请 求 道 服务 器 端 
并 通过 回调 函数 来 处 理 响 应 。 相 同 的 客户 端 方法 可 以 被 手动 执行 ( 以 编程 方式 )， 或 者 通过 
Ext .data.Store.1lo0ad() 方 法 或 sync () 方 法 执行 。 

现在 已 经 指定 了 该 远程 提供 程序 ， 接 下 来 通过 Ext .direct .Manager 抓 取 API 描 述 并 处 理 
它 。 为 此 ， 添 加 一 个 额外 的 <script> 标 签 ， 就 放 在 该 框架 的 引用 后 面 : 


<script type="text/javascript" src="rpc.php?javascript"></script> 


现在 是 时 候 来 看 下 rpc.php 中 的 示例 代码 了 。 你 可 以 在 examples/ch11/direct_app/pc.php 中 找到 它 。 
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PollingProvider RemotingProvider 
客户 端 服务 器 端 
I JavaScript 方 法 | 
| + | | 
ee = 和 执行 请 求 | 
es | | 
1 执行 响应 | | E 
| | 路 由 器 执行 
本 | 回调 | | 
在 一 个 特定 间隔 内 重复 单一 请 求 RPC JavaScript 方 法 对 任意 执行 有 效 


图 11-2 PollingProvider 与 RemotingProvider 的 对 比 


该 路 由 器 会 自动 返回 一 个 配置 ,并 通过 在 获取 到 的 JavaScript 文 件 尾部 拼接 一 个 特殊 行 来 创建 
Provider 的 一 个 实例 : 





Ext .Direct .addprovider (RPC .REMOTING_API); 
在 这 步 ，Ext Direct 将 会 自动 初始 化 该 namespace 并 create 方 法 。 然 后 所 有 的 远程 有 效 方法 将 会 
通过 之 前 配置 的 命名 空间 来 访问 。Util.dqate 变 成 REPC.Util.aqate，Actor.read 变 成 
RPC.Actor .reaao 


在 初始 化 一 个 提供 程序 之 前 额外 的 JavaScript 调 用 

如 果 项 目 使 用 Ext .Loader， 在 通过 添加 Ext .syncRequire('Ext.direct.Manager') 调 用 
Ext .Direct .addProvider 之 前 需要 Ext .direct .Manager。 此外， 如果 应 用 之 前 没有 被 定 
义 过 ， 你 需要 通过 Ext .ns ('RPC') 定 义 它 ，RPC 是 定义 在 API 描 述 中 的 命名 空间 。 




















看 一 下 代码 清单 11-4， 它 显示 了 一 个 API 描 述 的 示例 。 
代码 清单 11-4 “示例 API 描 述 


RPC.REMOTING API = { 了 为 路 由 器 URL 添 加 路 径 
he :"\/extdirect\/rpc.php", 
"type” :"remoting", 
丰 "namespace" RPE 3 设置 服务 类 型 
为 API "descriptor" : "RPC .REMOTING_API", 
设置 根 命 "enableBuffer" :1000， 
空间 "actions":{ 配置 批 缓存 
"Actors":[ 
{"name":"create", "len":1}, 
{"name":"read", "len":1}, 
{"name":"update", TET Ly 添加 类 和 方法 


{"name":"destroy", "len":1} 
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服务 器 端 返回 了 一 个 变量 , 该 变量 将 在 执行 过 程 中 被 Ext Direct 所 知 。 该 变量 将 引用 一 个 最 少 

包含 三 个 参数 的 对 象 : 

口 到 路 由 咒 的 URL@D; 

口 服务 类 型 ( 远程 / 轮 询 ) @; 

口 动作 、 代 表 类 、 方 法 ， 以 及 每 个 方法 接受 的 参数 个 数 @。 

其 他 都 被 计 入 特殊 配置 项 ,因为 你 不 应 该 污染 一 个 全 局 命名 空间 , 所 以 将 它 配 置 为 了 RPCO。 
你 可 以 为 ExtDirect 选 择 应 用 的 命名 空间 或 一 些 特殊 的 东西 一 一 这 基于 开发 者 的 偏爱 。 你 还 选择 了 
启用 批 缓存 并 将 其 设置 为 1000 ms (1 s ) @。 这 意味 着 Ext Direct 会 将 第 一 个 请 求 延迟 1 秒 并 等 待 
其 他 连续 的 调用 ,以 将 其 作为 批 处 理 为 一 个 请 求 发 送出 去 。 这 样 一 个 特性 需要 路 由 器 的 支持 ， 
为 这 些 请 求 会 被 组 合 为 每 项 都 是 唯一 标识 调用 的 数组 。 

下 面 的 代码 清单 包含 了 一 个 为 Sencha Architect 用 户 实现 的 示例 API 描 述 配 置 对 象 。 
代码 清单 11-5 ”为 SenchaArchitect 配 置 的 示例 API 描 述 

{ 

































































vb al "N/Extdirect\/rpes ph 
"tyBe” :"remoting", 
"namespace" RPEM 
"descriptor" : "RPC .REMOTING API", 
"enableBuffer" :1000， 6 指定 AP| 描述 符 名 
"actions":{ 
"Actors":[ 
{"name":"create", "len":1}, 
{"name":"read", “Len Ly 
{"name":"update", "Len":1}; 
{"name":"destroy", "len":1} 
J 
oT el 
{"name":"date", “Leni" sl:} 





Sencha Architect 的 用 户 会 很 欣赏 Architect 为 进一步 使 用 存储 和 部 件 而 导入 API 描 述 的 能 力 。 主 
要 的 差异 在 于 该 描述 需要 是 JSON 格 式 的 ， 并 包含 该 API 描述 符 的 名 字 @。 除 了 格式 发 生 了 变化 ， 
其 内 容 和 之 前 代码 清单 中 的 完全 相同 。 

一 个 重要 的 里 程 碑 达成 了 : 所 有 的 准备 工作 都 已 经 准备 就 绪 。 你 已 经 创建 了 一 个 路 由 器 ， 描 
述 了 API 并 将 其 包含 在 了 人 Web 应 用 中 。Ext Direct 已 经 创建 了 一 个 提供 程序 实例 ， 现 在 可 以 使 用 远 
程 方法 了 。 在 本 章 稍 后 的 内 容 中 , 你 会 看 到 在 一 个 ExtJS 应 用 使 用 两 种 主要 的 RPC: 通过 JavaScript 
的 直接 方法 调用 和 通过 Ext .data .Store 的 CRUD 操 作 。 
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11.5 直接 调用 远程 方法 

就 像 我 们 在 本 章 早 些 时 候 提 到 的 那样 ，Ext Direct 通 过 解决 Ext .Ajax 请 求 来 处 理 调 用 。 这 意 
味 着 该 处 理 是 异步 的 ; 为 了 对 响应 数据 做 一 些 操作 ,回调 函数 是 必需 的 。 每 个 客户 端 远程 方法 和 
远程 副本 拥有 相同 的 参数 数目 ， 还 有 回调 和 作用 域 。 在 下 面 的 代码 清单 中 ， 你 将 会 使 用 
RPC.ULil.dateo 
代码 清单 11-6 ”直接 调用 一 个 远程 方法 

Var CallbackFn = function(res) { 

this.log(res); 


this.timeEnd('DirectTiming'); 
} 























console.time('DirectTiming'); 
RPC.Util.date('d/m/Y', callbackFn, console); 


在 callbackFn 中 ， 你 只 将 最 终结 果 输 出 到 控制 台 。 为 了 演示 往返 速度 ， 这 里 需 定义 一 个 新 
的 控制 台 计 时 器 ， 只 有 在 回调 函数 被 调用 时 该 计时 器 才 会 被 终止 。 现 在 回调 函数 已 经 准备 好 了 ， 
控制 台 也 已 经 可 以 用 于 检测 ， 现 在 是 时 候 执行 RPc.Util.aqate 了 。 日 期 模式 'q/m/Y' 被 发 送 给 
路 由 器 并 进而 转发 给 目标 方法 , 该 方法 会 将 格式 化 的 日 期 返回 给 路 由 器 。 数 据 被 封装 在 一 个 JSON 
对 象 中 并 返回 给 浏览 器 。Ext Direct 接 收 到 该 数据 ， 通 过 ia 识别 它 ， 然 后 将 该 数据 作为 第 一 参数 
传递 给 回调 函数 并 执行 它 : 











25/01/2013 
DirectTiming: 151ms 


RPC .Util .date 很 好 地 在 浏览 屁 的 控制 台 上 输出 了 两 行 : 日 期 ， 完 全 以 你 想 要 的 格式 呈现 ; 完 
成 整个 操作 所 需要 的 时 间 。 该 测试 从 一 个 远程 位 置 执行 ,使 用 了 一 个 移动 网 络 。 

到 目前 为 止 还 不 错 。 现 在 让 我 们 增添 点 乐 超 , 使 用 下 面 代码 清单 中 的 联系 请 求 。 你 将 用 不 同 
的 参数 三 次 调用 相同 的 方法 。 观 察 该 网 页 检测 器 的 网 络 标签 会 特别 有 趣 。 
代码 清单 11-7 ” 批 次 请 求 

RPC.Util.date('d/m/Y', console.log, console); 


RPC.Util.date('H:i', console.log, console); 
RPC.Util.date('U', console.log, console); 


所 有 的 请 求 几 乎 都 在 同一 时 间 发 送 。 你 将 会 注意 到 回调 函数 是 一 个 简单 的 控制 台 日 志 , 也 就 
是 说 它 会 将 返回 结果 输出 到 控制 台 。 就 像 预 期 的 那样 ,所 有 的 结果 在 同一 时 间 被 返回 ,在 远程 处 
理 时 间 和 往返 时 间 之 后 的 1 s。 
但 是 ，Ext Direct 怎 样 区 别 来 自 客户 端 和 服务 器 端的 请 求 呢 让 我 们 看 看 下 面 的 代码 清单 。 


代码 清单 11-8 批 次 请 求 负载 
[ 





















































{ 
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] 


"ELTON eT 
"method":"date", 
"data": ["d/m/Y" 
vyBe Lv rpeYy 
Stem 2 


], 


"CELON SL; 
"method":"date", 
"datea ssw 
"tye ve "rbe, 
Wid"33 


vact 人 lor oti 
"method":"date", 
"qatar el ey 
"tye ve Troe, 
EL" 





一 个 简单 请 求 和 批 请 求 之 间 唯 一 重要 的 区 别 是 : 后 者 以 一 个 请 求 对 象 的 数组 的 形式 被 发 送 。 
每 个 请 求 对 象 都 用 一 个 tia 来 标识 ， 它 可 以 被 用 来 区 别 服务 器 端的 所 有 调用 。 该 路 由 器 还 将 需要 
为 一 个 请 求 的 数组 返回 相同 的 ID ， 我 们 很 快 会 回来 探讨 。 

被 用 于 远程 方法 的 参数 是 以 数组 的 形式 被 发 送 的 。 未 来 ，Sencha 可 能 会 支持 键 值 对 
(key/value )， 但 是 现在 请 确认 所 有 的 参数 是 按照 正确 顺序 调用 的 。 

每 一 次 请 求 都 应 该 有 一 个 恰当 的 响应 ， 让 我 们 在 下 面 的 代码 清单 中 看 一 下 。 


代码 清单 11-9 批 次 响应 


[ 
{ 


"YBe ve "re, 
NTs 2 

tv ne ot a sn i 
"method":"date" 
"ES NALNA20L3" 


"Eve rope 
Ee 
"action™.: "UtiL" 
"method":"date" 
"result":"03:08" 


"type": "rpce", 

















a 


r 


a 


’ 
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eel eh ein 

"aGtaoOnm tl 
"method":"date", 
"resmlt "T13276337097" 


] 


请 求 和 响应 看 起 来 像 “ 双 胞 胎 ”, 但 是 它们 之 间 有 一 个 重要 区 别 。 虽 然 在 请 求 中 参数 对 应 data 
键 ， 但 是 返回 值 现 在 匹配 的 是 *esult 键 。 请 记 住 响应 也 是 一 个 对 象 数组 ， 这 些 对 象 都 包含 tiqa 
属性 来 匹配 到 合适 的 请 求 。 
你 已 经 知道 怎样 直接 执行 、 调 试 甚至 检测 RPC, 日 会 经 常 通过 Ext .data.Store 使 用 Ext Direct 
以 使 用 部 件 中 的 数据 。 让 我 们 来 看 下 Ext Direct 是 怎样 使 书写 代码 变 得 更 加 简单 和 快捷 的 。 你 还 会 
使 用 Ext Direct 在 一 个 Ext .grid.Panel 中 实现 完整 的 CRUD 处 理 。 开 始 吧 

















































































































11.6 启用 CRUD 的 Ext.data.DirectStore 


接 下 来 创建 一 个 可 编辑 的 Ext .grid.Panel 的 实例 (参见 图 11-3 ), 并 使 用 Ext .data.Sstore 中 的 
写 人 器 配置 来 利用 远程 端的 自动 数据 同步 。 看 起 来 有 好 多 事情 要 做 , 但 是 这 样 的 工作 对 于 ExtJS 4 
和 Ext Direct 来 说 只 是 小 菜 一 碟 儿 。 















































Actors Grid x 
Add Delete 
Name id 
John Travolta 856 
Benny Hill 11939 
Bruce Willis 18768 





图 11-3 ”与 远程 端 进行 自动 同步 数据 的 可 编辑 网 格 


这 个 示例 可 以 和 你 之 前 使 用 过 的 第 一 个 示例 共用 一 个 index.html 文 件 和 相同 的 API 描述 符 。 这 
意味 着 你 已 经 知道 了 怎样 初始 化 Ext Direct 并 让 其 知道 哪些 方法 是 有 效 的 。 还 有 , 再 看 一 下 代码 清 
单 11-2， 它 用 PHP 为 第 二 个 示例 创建 了 一 些 方法 。 

首先 解决 最 困难 的 部 分 ，Ext .data .Model， 如 下 面 的 代码 清单 显示 。Ext .data. Model 
负责 任何 数据 特定 的 事情 : 从 服务 器 抓 取 记 录 、 创 建新 的 记录 、 更 新 和 删除 、 调 用 Ext Direct 方 法 
以 及 执行 回调 。 
代码 清单 11-10 ”配置 Ext .data.Model 


Ext .define('Actor', { 
extend : 'Ext.data.Model', 









































fields : |[ 
‘name', 
'data' 
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i 添加 Direct 代 理 
DEORYy: 开 
type : 'direct', 





aBi ss 
create : RPC.Actors.create, 
read : RPC.Actors.read, 设置 CRUD API 方 法 
update : RPC.Actors.update， 
destroy : RPC.Actors.destroy 
}y 
writer : { 


type: 'json', 
writeAllFields: true 
> 


reader : { 
root "ata 
idProperty > 
type 2 OLY 
successProperty : 'Success' 


bn 

你 已 经 处 理 过 存储 、 代 理 、 读 取 器 和 写 和 器, 所 以 对 于 该 示例 的 绝 大 部 分 应 该 都 可 以 从 容 应 
对 。 两 个 不 寻常 的 配置 项 是 代理 类 型 @Q 和 CRUD API@。 在 API 的 配置 属性 中 ， 你 已 经 告诉 了 代 
理 对 于 每 个 CRUD 操 作 应 该 使 用 哪个 方法 。 这 是 对 Ext Direct 应 该 做 的 所 有 设置 。 现 在 必须 创建 一 
些 处 理 程序 来 添加 和 删除 数据 ， 就 像 下 面 代码 清单 中 显示 的 那样 。 


代码 清单 11-11 ”支持 处 理 程序 和 实例 


























Var editing = Ext.create('Ext.grid.plugin.CellEditing'), 
Ie 6 实例 化 CellEditing 
onAdd, 插件 
onDelete; 
onAdqd = function() { 
var record = Ext.create('Actor'); 添加 新 记录 


editing.cancelEdit () 
grid.getStore().insert (0, record); 
editing.startEditByPosition(t 

row: 0, 

column: 0 


ye 
} 


9 删除 记录 
onDelete = function()t 


grid.getView(), 
view.getSelectionModel() .getSelection()[0]; 


Var view 
selection 
if (selection) { 
grid.getStore() .remove(selection); 
} 
} 


第 一 步 是 实例 化 CellEditing 插 件 @, 你 选择 它 作 为 对 网 格 的 编辑 选项 , 使 用 了 该 网 格 的 引用 ， 

















11.6 启用 CRUD 的 Ext.data.DirectStore 247 





然后 为 工具 栏 按 钮 设置 了 onAdd@ 和 onDelete 全 处理 程 序 ,。 这 两 个 处 理 程序 都 将 直接 处 理 存储 ， 
但 不 会 以 任何 形式 和 Ext Direct 一 起 工作 。Ext .data.Store 将 完成 这 项 工作 。 








注意 你 没有 污染 全 局 的 命名 空间 ， 因 为 已 经 在 Ext .onReady 中 包含 了 所 有 代码 。 





mh 





最 后 创建 该 网 格 ， 如 代码 清单 11-12 所 示 。 这 将 会 很 有 趣 ! 
代码 清单 11-12 ”网 格 配置 


grid = Ext.create('Ext.grid.Panel', { 





height CA 
width ; 6005 
title : 'Actors Grid', 
renderTo : Ext.getBody (), 
selType : 'Ccellmodel', 
store 和 
model 了 
autoLoad: true, 2 与 服务 器 同步 数据 
autoSync: true 
} 
columns 站 全 
dataIndex : 'name', 
flex 2 
text : 'Name', 
field cat 
type 2 了 忆 信 六 世 下 二 全 二 
} 
2 
dataIndex te 
align a al on 
width .0 
text oa 
Fa 
plugins 于 
editing 
]， 
dockedItems : | 
{ 
xtype : 'toolbar', 
dock OBE 
items: [ 


{ 
text : 'Adgd', 29 指派 onAqa 处 理 程序 
handler : onAdd 


text : 'Delete', 
handler : onDelete 


} oe 指派 onDelete 处 理 程序 
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有 
关键 的 配置 项 是 存储 设置 @。 你 设置 autosync 为 true 9 这 意味 着 Ext .data. Store 将 会 
监控 数据 变化 并 将 它们 推送 到 服务 器 。 有 了 这 个 设置 ， 网 格 就 完成 了 ， 并 被 如 图 11-4 所 示 那 样 
演 染 。 

















Actors Grid x 
Add Delete 
Name id 
John Travolta 856 
Benny Hill 11939 
Bruce Willis 18768 














图 11-4 ”可 运行 的 使 用 Ext Direct 的 数据 网 格 


对 于 每 个 响应 都 应 该 返回 一 个 带 有 success: true 属 性 的 对 象 以 使 存储 知道 一 起 正常 。 否 
则 ,你 便 给 出 了 失败 的 描述 。 对 于 读 取 、 更 新 和 销毁 都 是 这 样 的 ， 然而 添加 数据 将 会 有 额外 的 信 
息 被 返回 : ID 和 新 的 记录 。 一旦 用 户 点 击 了 Add 按 钮 @， 存 储 会 创建 一 个 新 的 记录 并 和 服务 器 端 
确认 。 用 户 将 继续 编辑 该 条 新 的 记录 ，Ext .data.store 则 更 新 该 条 记录 的 ID (一 旦 收 到 它 )。 
更 改 应 该 在 同一 时 刻 发 生 , 存储 会 将 为 保存 的 字段 标记 一 个 红色 三 角 , 并 等 待 下 一 次 同步 再 发 送 
这 些 更 改 。 

在 不 超过 100 行 的 代码 里 ,你 已 经 创建 了 一 个 网 格 ， 它 从 一 台 服 务 器 读 取 数 据 , 还 允许 创建 、 
编辑 和 删除 记录 合 。 对 于 那些 快速 键入 , 它 还 可 以 缓存 请 求 ， 可 以 在 短 时 间 内 修改 一 些 列 。 这 将 
极 大 地 节省 带宽 ， 并 且 有 时 会 助 升 性 能 。 













































































11.7 “小 结 


Ext Direct 是 一 个 用 来 调用 远程 方法 的 强大 机 制 。 它 的 主要 目的 是 简化 服务 需 端 和 客户 端的 通 
信 ， 同 时 减少 实现 该 项 工作 的 代码 。 是 的 ， 有 一 些 API ( 比如 dnode ) 做 相似 的 工作 ,但 是 没有 一 
个 和 Ext JS 的 数据 存储 集成 得 如 此 漂亮 ， 为 新 项 目 和 现 有 项 目 提供 完整 的 CRUD 工 作 流 。 简 单 的 
范围 控制 是 该 包 的 为 一 个 独特 优势 。 

现在 你 已 经 看 到 了 怎样 在 服务 器 端 和 客户 端 之 间 传 输 数 据 , 让 我 们 继续 在 用 户 界面 元 素 间 交 
互 性 地 传输 数据 。 下 一 章 将 为 应 用 添加 拖 放 功能 。 
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拖 放 








本 章 内 容 

口 理解 拖 放 工作 流 

口 剖析 Ext JS 拖 放 类 

口 实现 拖 放 的 覆盖 方法 
口 理解 拖 放 的 生命 周期 
口 使 用 拖 放 插 件 











使 用 用 户 图 形 界面 最 大 的 一 个 好 处 就 是 : 能 够 在 界面 上 通过 简易 的 鼠标 动作 移动 元 素 。 这 种 
用 户 交 互 称 作 拖 放 。 每 一 次 使 用 现代 计算 机 ， 你 几乎 都 会 毫 不 犹豫 地 使 用 拖 放 功能 ， 这 个 功能 极 
大 地 方便 了 人 们 的 生活 。 

想 要 删除 一 个 文件 ， 点 击 并 拖 动 文件 图 标 把 它 放 到 垃圾 箱 或 者 回收 站 图 标 上 即 可 。 很 容 
易 ， 是 不 是 ”如 果 没 有 拖 放 功能 呢 ? 怎样 才能 把 文件 从 它 所 在 的 位 置 放 到 回收 站 中 呢 ? 让 我 
们 想 想 有 哪些 可 能 : 可 以 首先 点 击 该 文件 并 聚焦 ， 然 后 通过 一 个 组 合 键 来 剪 切 文件 ， 再 找到 
并 聚焦 回收 站 窗口 ， 最 后 通过 一 个 组 合 键 把 文件 粘贴 进去 。 另 外 一 种 做 法 是 点 击 选 中 文件 并 
聚焦 ， 按 下 键盘 上 的 删除 键 (Delete )， 但 如 果 你 是 右 撤 子 ， 这 样 做 需要 把 手 从 鼠标 上 挪 开 。 
相反 ， 拖 放 就 简单 多 了 ， 不 是 吗 ? 现在 想象 自己 是 富 网 络 应 用 的 用 户 ， 怎 样 通过 拖 放 来 简化 
用 户 体验 呢 ? 

幸运 的 是 ，Ext JS 提供 了 拖 放 功 能 。 在 本 章 中 你 将 看 到 ， 只 要 努力 和 下 决心 就 可 以 在 应 用 中 
加 入 拖 放 功能 。 首 先是 在 基本 DOM 元 素 上 添加 拖 放 功能 ， 这 将 为 在 部 件 (如 网 格 和 树 形 面 板 ) 
上 添加 这 些 行为 打下 基础 。 


12.1 拖 放 工作 流 


拖 放 功 能 发 生 的 前 提 是 计算 机 知道 哪些 东西 是 可 以 或 者 不 可 以 被 拖 动 的 , 还 要 知道 哪些 东西 
可 以 或 者 不 可 以 被 放 入 。 比 如 说 , 桌面 上 的 图 标 通常 是 可 以 被 拖 动 的 , 但 是 其 他 一 些 东 西 ， 比 如 
说 Windows 任 务 栏 上 的 时 钟 或 者 Mac OS X 等 上 的 菜单 栏 则 不 可 以 。 这 一 级 别 的 控制 对 于 允许 某 些 
工作 流 的 执行 是 必要 的 ， 我 们 将 会 讨论 这 一 点 。 
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为 了 有 效 地 利用 拖 放 , 你 需要 理解 完整 的 工作 流 。 本 节 把 工作 流 按 照 拖 放 的 生命 周期 划分 成 
三 个 主要 的 部 分 : 拖 动 的 开始 、 拖 动 动作 和 放 入 。 


12.1.1 拖 放 的 生命 周期 


以 电脑 介面 作为 示范 ,桌面 上 的 任何 图 标 都 可 以 被 拖 动 , 但 是 只 有 一 小 部 分 可 以 被 放 入 , 通 
常 是 磁盘 或 者 文件 夹 图 标 ， 垃 圾 回收 站 或 者 是 可 执行 程序 图 标 。 对 于 Ext JS 来 说 ， 拖 放 同 样 需要 
这 样 的 注册 机 制 。 任 何 一 个 元 素 都 需要 像 这 样 被 初始 化 才能 够 进行 拖 放 。 要 让 DOM 元 素 可 以 被 
拖 放 ， 它 至 少 必须 注册 成 拖 动 项 或 是 放 入 项 。 一 旦 元 素 被 这 样 注册 了 ， 拖 放 就 可 以 起 作用 了 。 

拖 动 操 作 是 开始 于 通过 鼠标 点 击 并 点 住 电脑 图 标 , 接着 按 住 鼠标 并 拖 动 。 电 脑 会 基于 前 面 描 
述 的 注册 机 制 来 判断 一 个 项 目 是 否 可 以 被 拖 动 的 。 如 果 不 能 , 那么 什么 都 不 会 发 生 。 用 户 可 以 点 
击 并 尝试 拖 动 操作 , 但 是 什么 都 不 会 发 生 。 要 是 一 个 元 素 是 允许 被 拖 动 的 ， 图 形 界面 通常 就 会 创 
建 该 拖 动 项 的 一 个 轻 量 级 的 复制 品 ， 也 叫 作 拖 动 代理 , 它 会 跟随 鼠标 广 标 的 移动 。 这 给 用 户 感觉 
他 们 真 的 是 在 屏幕 上 拖 动 那 些 东 西 。 

对 于 在 拖 动 动作 过 程 中 鼠标 光标 的 每 一 个 变化 (或 者 说 对 7 坐标 轴 的 变化 ), 电脑 都 会 判断 是 
否 可 以 把 拖 动 项 放 入 光标 所 在 的 位 置 。 如 果 是 可 以 被 放 入 的 位 置 , 就 会 出 现 某 种 可 视 化 的 放 入 操 
作 引 导 。 如 图 12-1 所 示 ， 在 文件 图 标 代理 被 拖 过 文件 图 标 上 时 ， 你 就 会 看 到 一 个 放 入 引导 。 

拖 放 操 作 
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拖 动 代理 
图 12-1 Mac OS X 操作 系统 上 的 桌面 拖 放 交 互 ， 左 边 是 由 拖 动 事件 触发 而 创建 的 拖 动 
代理 ， 右 边 则 展示 了 放 人 引导 


拖 放 的 生命 周期 在 放 入 动作 发 生 之 后 就 结束 了 , 也 就 是 在 拖 动 操作 中 鼠标 按键 释放 之 后 。 此 
时 ,计算 机 必须 决定 伴随 放 入 操作 要 做 的 事情 。 放 入 事件 是 否 发 生 在 一 个 合法 的 放 和 人 目标 上 ? 如 
果 是 ,那么 放 入 目标 项 是 不 是 和 拖 动 项 属于 同一 个 拖 放 组 呢 ?” 是 把 拖 动 项 进行 复制 还 是 移动 呢 ? 
这 样 的 决定 大 多 是 由 应 用 程序 的 逻辑 自己 来 决定 的 ， 这 也 是 最 需要 写 代码 的 地 方 。 
虽然 解释 拖 放行 为 相对 容易 , 但 是 实现 起 来 却 相当 地 困难 ,虽然 不 是 不 可 能 。 要 想 高 效 地 实 
现 拖 放 的 一 个 关键 要 素 是 对 于 类 层次 以 及 每 个 类 应 该 做 什么 有 基本 的 理解 。 这 一 点 对 于 在 基础 
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DOM 级 别 上 实现 拖 放 功能 是 正确 的 ， 并 且 你 也 将 会 看 到 这 一 点 是 在 Ext JS UI 部 件 的 拖 放 功 能 的 
实现 过 程 中 体现 。 
出 发 啦 ! 我 们 先 爬 上 三 万 英 太 并 马 梧 拖 放 的 类 文件 的 层次 结构 。 


12.1.2 自 上 而 下 审视 拖 放 类 


乍 一 看 ， 拖 放 类 列表 可 能 有 点 儿 让 人 招架 不 住 。 当 Jesus 第 一 次 看 到 API 文 档 里 面 的 类 列表 ， 
被 这 些 选项 吓 了 一 跳 。 这 个 所 谓 的 框架 有 11 个 类 ， 可 以 提供 基本 功能 ( 比如 实现 可 拖 放 的 DOM 
元 素 ),， 也 可 以 提供 复杂 的 功能 ( 比如 可 以 通过 代理 来 拖 放 多 个 节点 ),。 最 酷 的 是 ,一 旦 你 从 上 而 
下 地 审视 这 些 类 ， 就 会 发 现 组 织 这 些 支持 类 并 理解 它们 的 作用 并 非 难事 。 

我 们 从 这 里 开始 探索 。 图 12-2 展 现 了 类 层次 结构 ， 其 中 有 11 个 拖 放 类 。Ext JS 框架 的 所 有 拖 
放 功 能 都 是 从 DragDrop 类 开始 的 。 DragDrop 类 提供 了 拖 放 功 能 需要 的 所 有 基本 方法 , 这 些 方法 
就 是 用 来 被 覆盖 以 供 使 用 的 。 它 仅仅 是 提供 了 实现 拖 放行 为 的 最 基本 的 工具 , 你 要 负责 写 代 码 来 
完成 整个 实现 。 
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图 12-2 ” 拖 放 类 层次 结构 可 以 划分 成 两 个 主要 部 分 : 拖 动 ( 左 ) 、 放 入 ( 右 ) 


这 是 理解 拖 放 工 作 原 理 的 关键 , 因为 这 个 设计 模式 贯穿 了 整个 拖 放 类 层次 结构 。 这 种 理念 是 
非常 强大 的 , 因为 当 你 拥有 了 可 以 给 应 用 程序 添加 行为 的 基本 工具 类 ,就 会 很 容易 确保 拖 放 功 能 
的 正常 工作 。 

从 上 往 下 看 类 的 继承 链 ， 就 会 看 到 一 个 分 又 ， 左 边 是 从 DD 开 始 ， 右 边 从 DDTarget 开 始 。DD 
是 所 有 拖 动 操作 的 基 类 ，DDTarget 是 所 有 放 入 操作 的 基 类 。 它 们 两 个 都 分 别提 供 了 相关 行为 的 
基本 功能 。 这 一 功能 上 的 解 看 让 你 可 以 关注 特定 的 行为 。 竺 会 儿 我 们 研究 怎么 在 DOM 节 点 上 实 
现 拖 放 功能 的 时 候 ， 你 就 会 看 到 这 一 点 是 如 何 产生 作用 的 了 。 
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继续 往 下 看 继承 链 ， 你 就 会 看 到 Ext JS 在 为 预期 的 行为 渐进 式 增加 功能 。 表 12-1 罗 列 了 所 有 
的 类 以 及 对 它们 的 设计 初衷 的 简单 描述 。 



























































































































































































































































表 12-1 拖 放 类 
拖 动 类 放 入 类 
名 称 用 途 名 尔 用 途 

DD 基本 的 拖 动 实现 ， 元 素 可 以 被 拖 动 或 者 放 | DDTarget 允许 任意 元 素 参 与 到 拖 放 组 的 基本 类 ， 
入 到 任何 地 方 。 这 是 DOM 级 别 的 拖 放 实 现 但 是 它 不 可 以 被 拖 动 ， 也 就 是 说 它 只 可 
最 多 用 到 的 类 以 被 放 入 元 素 

生生 全 的 人 基本 拖 动 的 实现 ， 用 来 实例 化 拖 动 元 素 的 | PropTarget | 该 基 类 提供 了 一 个 放 人 类 的 空 管道 ， 它 
一 个 轻 量 级 实现 ， 也 称 作 拖 动 代理 ， 它 幸 会 在 可 拖 动 元 素 被 放 入 进来 的 时 候 起 作 
代 了 源 元 素来 被 拖 动 。 在 需要 拖 动 代理 的 j。 开 发 人 员 负 责 通过 覆盖 noti fy 方法 
时 候 使 用 这 个 类 是 惯用 的 手法 来 完成 功能 

DragSource | 提供 了 使 用 状态 代理 拖 放 的 基本 实现 ， 也 | Drop2zone 提供 多 种 节点 可 以 被 放 和 人 的 类 ， 它 和 
是 Dragzone 的 基 类 。 它 可 以 被 直接 使 用 ， DragZone 类 一 起 使 用 最 佳 。 Ext .Grid . 
但 是 更 常用 的 是 Dragzone 类 (下 一 项 ) header .DropZzone 是 专门 为 网 格 面板 特 

别 实现 的 DropZone。Ext.tree.View 
Dropzone 则 是 为 树 形 面板 特别 实现 的 

Draglene 这 个 类 允许 同时 拖 动 多 个 DOM 元 素 ， 并 且 
经 常 和 视图 部 件 一 起 使 用 。 为 了 给 网 格 面板 
和 树 形 面板 提供 拖 放 功能 , 它们 各 自 有 这 个 
类 的 实现 ， 分 别 是 Ext .grid.header. 
DragZzone 和 Ext .tree.ViewDragZone 











你 都 看 到 了 : 每 一 个 拖 放 类 和 它们 的 设计 初 囊 。 一 个 拖 动 项 ( DD 类 或 者 其 子 类 ) 可 以 是 放 人 
目标 , 但 是 一 个 放 入 目标 ( DDTarget 类 或 者 其 子 类 ) 却 不 能 是 一 个 拖 动 项 。 了 解 这 一 点 是 很 重要 的 ， 
为 当 你 决定 要 有 一 个 既 能 作为 拖 动 项 又 要 作为 放 人 目标 的 元 素 时 ， 就 必须 使 用 一 个 拖 动 类 了 。 

如 果 是 在 通用 DOM 节 点 上 实现 拖 放 功 能 ， 并 且 需 要 一 次 仅 允许 拖 动 一 个 节点 ， 可 以 使 用 DD 
类 或 者 DDProxy 类 。 如 果 拖 动 超过 一 个 元 素 ， 需 要 使 用 Dragsource 类 或 者 Dragzone 类 。 这 就 
是 为 什么 树 形 面板 和 网 格 面板 拥有 它们 自己 的 Dragzone 类 的 扩展 或 实现 。 

同样 ， 如 果 想 要 放 入 单个 节点 ， 那 么 DDTarget 类 就 将 是 要 选择 的 放 和 类。 对 于 多 节点 的 放 
和 人 操作 就 需要 DropTarget 类 或 者 DropZzone 类 了 > 因为 这 两 个 类 是 和 Dragsource 、 DragzZone 
以 及 它们 的 子 类 交互 的 必要 渠道 。 

知道 这 些 类 是 什么 是 拼图 的 一 部 分 。 下 一 部 分 你 需要 了 解 哪些 方法 需要 被 覆盖 。 这 是 成 功 部 
署 的 最 关键 部 分 。 


12.1.3 一 切 尽 在 覆盖 之 中 


正如 我 们 之 前 所 说 的 , 多 种 多 样 的 拖 放 类 只 是 用 来 提供 一 个 支持 拖 放行 为 的 基础 框架 , 仅仅 
是 完成 拖 放 功能 并 使 之 可 用 的 一 部 分 。 每 一 个 拖 放 类 都 包含 一 系列 的 抽象 方法 , 需要 由 你 (终端 
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应 用 程序 员 ) 来 覆盖 ( 见 表 12-2 )。 


表 12-2 ” 拖 放 功能 常用 的 抽象 方法 
方 ” 法 说 明 

OEag 当 元 素 被 拖 动 触发 snMouseMove 事 件 时 调用 。 如 有 果 想 要 在 拖 动 之 前 做 些 操作 ， 可 能 要 选择 覆盖 

方法 b4Drag 或 者 startDrag 
onDraghneer 在 拖 动 元素 第 一 次 碰 到 同一 个 拖 放 组 内 的 男 一 个 拖 放 元 素 时 调用 。 这 里 可 以 给 放 入 引导 写 代码 
onDragover 在 一 个 拖 动 元 素 被 拖 动 出 来 的 时 候 调 用 
和 在 拖 动 元 素 离 开 了 相关 的 拖 动 或 放 入 元 素 占用 的 物理 空间 后 调用 
onValiqprop 在 拖 动 元 素 被 放 入 到 任意 的 不 相关 拖 动 或 放 入 元 素 上 时 调用 。 这 是 为 告诉 用 户 他 们 在 错误 的 地 方 

放 入 了 拖 动 元 素 而 注入 提示 的 绝 佳 之 处 
onpragorop 在 拖 动 元 素 被 放 入 到 同一 个 拖 放 组 内 男 一 个 拖 放 元 素 上 时 调用 



























































































































































虽然 所 有 这 些 方法 都 在 框架 API 文 档 的 拖 放 章节 罗列 了 ， 但 是 最 好 还 是 简单 介绍 一 下 一 部 分 
Ext .ddq.DD 类 上 非常 常用 并 且 需 要 被 覆盖 的 抽象 方法 。 这 样 的 话 , 你 就 能 意识 到 自己 应 该 重点 看 
API 文 档 中 的 哪 一 部 分 了 。 

记 住 ,Ext .dg.DD 类 是 所 有 拖 动 相关 的 元 素 的 基 类 ， 当 你 从 上 而 下 地 审视 类 层次 时 , 会 发 现 
有 不 少 功能 被 逐渐 添加 上 去 。 由 这 些 子 类 增加 的 功能 会 逐步 覆盖 那些 方法 。 

举 个 列子 ，Ext .dd.DD 提 供 了 一 些 b4 (before ) 方法 ， 让 你 可 以 编写 自己 的 行为 让 它 在 某 事 
发 生 之 前 执行 。 其 中 有 在 鼠标 按 下 事件 之 前 执行 (b4MouseDown )， 也 有 在 拖 动 一 个 元 素 之 前 执 
行 (b4startDrag )。Ext .dd.DDProxy 类 是 Ext .qq.DD 类 的 第 一 个 子 类 。 它 覆盖 了 用 来 创建 可 
拖 动 代理 的 方法 ， 该 类 方法 会 在 拖 动 代码 执行 之 前 被 调用 。 

要 想 知道 覆盖 哪些 方法 以 达到 特定 的 实现 , 需要 向 API 去 请 教 那个 特定 的 拖 放 类 。 因 为 ExtJS 
的 更 新 速度 周期 非常 快 ， 一 些 方法 可 能 被 添加 ， 重 命名 或 者 删除 ， 所 以 定期 地 看 API 文 档 会 帮助 
你 了 解 最 新 的 变化 。 

对 于 拖 放 工作 原理 最 后 一 点 我 们 需要 加 以 讨论 的 是 拖 放 组 的 使 用 , 以 及 它 在 开发 应 用 程序 中 
意味 着 什么 。 


12.1.4 拖 放 总 是 在 组 中 工作 的 


拖 放 元 素 是 和 组 相关 联 的 。 组 是 一 个 基础 的 约束 条 件 , 用 来 管理 一 个 拖 动 元 素 是 否 可 以 被 放 
入 到 另外 一 个 元 素 上 。 组 是 一 个 标签 帮助 拖 放 框架 来 决定 一 个 注册 了 的 拖 动 元 素 是 否 可 以 和 另外 
一 个 注册 了 的 拖 动 或 是 放 入 元 素 交 互 。 

拖 放 元 素 必须 关联 到 至 少 一 个 组 ,甚至 可 以 关联 到 多 个 。 它 们 通常 在 初始 化 的 时 候 就 和 一 个 组 
相关 联 并 是 通过 addToGroup 方 法 和 更 多 的 组 相关 联 。 同 样 的 ， 它 们 也 可 以 通过 removeFromGroup 
方法 解除 关联 。 

这 是 理解 ExtJS 拖 放 模 块 基础 的 最 后 一 块 拼图 了 。 现在 是 时 候 开 始 使 用 并 强化 所 学 知识 的 了 。 
我 们 从 开发 DOM 元 素 的 拖 放 功能 开始 。 
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12.2 拖 放 : 一 个 基础 的 例子 


在 探索 之 前 ,我 们 先 来 模拟 游泳 池 的 设置 ， 它 有 更 衣 室 、 泳 池 以 及 热 水 浴 缸 。 在 这 里 ， 你 需 
要 遵守 一 些 约束 条 件 。 比 如 说 ,男士 和 女士 只 能 够 根据 性 别 进入 对 应 的 更 衣 室 。 所 有 人 都 可 以 进 
入 游泳 池 ， 但 是 只 有 一 部 分 喜欢 进入 热 水 浴缸 。 现 在 知道 需要 构建 什么 了 ， 开 始 写 代码 吧 。 

正如 你 即将 看 到 的 , 配置 一 个 可 以 在 屏幕 上 拖 动 的 元 素 极其 简单 , 但 在 此 之 前 必须 先 创建 一 
个 可 操作 的 工作 区 。 可 以 通过 创建 一 些 CSS 样 式 来 管理 一 组 特定 的 DOM 元 素 的 样式 , 然后 把 拖 动 
逻辑 应 用 到 它们 身上 。 我 们 会 使 事情 尽 可 能 得 简单 ， 从 而 把 注意 力 放 在 主要 问题 上 。 



























































12.2.1 创建 一 个 小 型 工作 区 


如 下 面 的 代码 清单 所 示 , 首先 要 创建 用 来 代表 更 衣 室 和 进入 其 中 的 人 的 标记 。 这 个 代码 清单 
蛮 长 的 ， 因 为 HTML 需 要 建立 所 要 求 的 样式 和 布局 。 


代码 清单 12-1 创建 拖 放 工 作 区 


<style type="text/css"> 











body { 

padding: 10px; ET 配置 拖 放 元 素 容器 样式 
} 
.lockerRoom { 

width : Toss 

border: 1px solid; 

padding: 10px} 


background-color: #ECECEC; 
} 





.lockerRoom div { 
border: lpx soliqd #FF0000; 0 
background-color: #FFFFFF; 
padding: 2px; 
margin: SPX 
CUTSOT : move; 
} 
</style> 
<table> 
<tr> 
<td align='center'> 
Male Locker Room 
</td> 
<td align='center'> 
Female Locker Room 
</td> 
去 /七 五 
<tr> 为 我 们 的 拖 放 元 素 
< 七 Q> 设置 HTML 
<div id="maleLockerRoom" class="lockerRoom"> 
<div>Jack</div> 


<div>Aaron</div> 
<div>Abe</div> 
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</div> 


</td> 
<td> 
<div id="femaleLockerRoom" class="lockerRoom"> 
<div>Sara</div> 
<div>Jill</div> 
<div>Betsy</div> 
</div> 
</td> 
/EES 
</table> 


代码 清单 12-1 创 建 了 CSS 样 式 和 标记 用 来 为 探索 基本 DOM 元 素 的 拖 放 创 造 了 条 件 。 从 定义 
CSS 样 式 开 始 ，CSS 会 控制 lockerRoom@ 元 素 容 器 以 及 它们 的 子 节 点 的 样式 @。 然 后 可 以 设置 
使 用 这 些 CSS 的 标记 人 @。 

图 12-3 展 现 了 泻 染 在 屏幕 上 的 更 衣 室 HTML 页 面 。 注 意 ， 当 把 光标 移动 到 更 衣 室 元 素 的 子 节点 
上 上 时， 光标 就 会 变 成 一 个 十 字 。 这 源 自 于 前 面 配置 的 CSS 样 式 ， 这 是 提示 拖 动 动作 的 好 方法 。 















































男 更 衣 室 女 更 衣 室 
Jack Sara 
Aaron Jill 
Abe Betsy sm 























图 12-3” 演 染 在 屏幕 上 的 更 衣 室 HTML 代 码 








接 下 来 需要 配置 JavaScript 使 这 些 元 素 可 以 被 拖 动 。 


12.2.2 ”配置 元 素 使 之 可 拖 动 


代码 清单 12-2 配 置 更 衣 室 子 元 素 ， 使 之 可 以 在 屏幕 上 被 拖 动 。 要 完成 这 一 目标 ,需要 在 
Ext .get 调 用 的 结果 上 执行 select 调 用 把 maleLockerRoom 元 素 里 的 子 元 素 聚 集 起 来 。 然后 利 
用 Ext .each 来 遍历 整个 子 节点 的 链表 并 创建 一 个 新 的 Ext .dq .DD 的 实例 并 传人 element 的 引 
用 ， 这 样 就 使 得 元 素 可 以 在 屏幕 上 被 拖 动 了 。 可 以 对 femaleLockerRoom 里 面 的 元 素 做 同样 的 
事情 。 
代码 清单 12-2 ”启用 元 素 的 拖 动 功能 

Var maleElements = Ext.get('maleLockerRoom').select ('div'); 


Ext .each (maleElements.elements, function(el) { 
new Ext.dd.DD(el); 






































Var femaleElements = Ext.get('femaleLockerRoom') .select('div'); 
Ext .each (femaleElements.elements, function(el) { 
new Ext.dd.DD(el); 
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刷新 页 面 之 后 就 可 以 在 屏幕 
拖 放 任意 的 子 aiv 元 素 了 。 








上 轻松 地 拖 放 元 素 了 。 如 图 12-4 所 示 ， 可 以 不 受 约束 地 在 屏幕 上 


























图 12-4 在 更 衣 室 上 人 允许 拖 动 操作 了 ， 并 且 不 受 任何 约束 


让 我 们 仔细 观察 下 Ext .adg.DD 是 如 何 工作 的 ， 以 及 它 对 DOM 元 素 做 了 什么 。 为 此 ， 需 要 刷 


新 页 面 ， 并 打开 Firebug 的 在 线 HTML 检 查 工 具 。 我 们 将 集中 看 Jack 元 素 。 


12.2.3 分析 Ext .dq.DD 的 DOM 元 素 变 化 























图 12-5 通 过 Firebug 提 供 的 DOM 检 查 工具 展示 了 页 面 更 新 之 后 瞬间 拖 动 元 素 的 HTML 代 码 。 
男 更 衣 室 女 更 衣 室 




















FA Inspect Edit 


div#ext-gen3 < div#maleLo...lockerRoom < td < tr < tbody < table < body.ext-gecko < html 
Console ”HTML CSS Script DOM Net YSilow Options 
rr Cr 
于 <tr> 
了 <td> 


9 <div id="maleLockerRoom" class="lockerRoom" 
<div ide"ext-gen3"> Jack </div> 
<div id="ext-gen4">Aaron</div> 
<div id="ext-gen5"> Abe </div> 


图 12-5 ”检查 拖 动 操作 发 生前 的 DOM 元 素 Jack ( 高 亮 
































当 着 眼 于 Jack 元 素 ( 图 12-5$ 中 的 高 亮 部 分 ) 的 时 候 ， 首 先 映 入 眼帘 的 是 它 被 赋予 了 唯一 的 ID ， 
名 为 "ext-gen3"。 注 意 ， 在 标记 文本 中 并 没有 给 这 个 元 素 赋予 一 个 ID。 如 果 一 个 元 素 已 经 有 一 
个 自己 的 ID ，Ext .ddq.DD 就 会 使 用 它 。 但 是 为 了 通过 ID 跟踪 这 个 元 素 ， 这 个 元 素 被 Ext .dd.DD 
的 超 类 Ext .dd.DragDrop 赋 了 予 了 一 个 ID。 
警告 


如 果 一 个 元 素 的 id 在 注册 为 拖 动 元 素 之 后 改变 了 ， 那 么 这 个 元 素 的 拖 动 配置 也 就 随 之 失 
效 了 。 如 果 打 算 更 改 一 个 特定 元 素 的 idq 值 ， 最 好 的 办 法 是 调用 这 个 元 素 的 Ext .dd.DD 实 
例 上 的 destroy 方 法 ， 并 创建 一 个 新 的 Ext .dda.DD 实 例 ， 同 时 传 入 一 个 新 的 ID 值 作 为 第 
一 个 参数 。 
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你 可 能 还 在 HTML 检查 工具 上 注意 到 了 另外 一 点 ， 这 个 元 素 上 没有 被 赋予 其 他 的 属性 。 如 图 
12-6 所 示 ， 现 在 可 以 稍微 拖 动 一 下 元 素 ， 并 观察 其 中 的 变化 。 





























男 更 衣 室 女 更 衣 室 
Sara 
Jack 
Aaron Jill 
Abe Betsy 
溺 Inspect Edit div#ext-gen3 < div#maleLo...lockerRoom < td < tr < tbody < table < body.ext-gecko < html 
Console ”HTML CSS Script DOM Net YSilow Options 
PF <rs 
YY <tr> 
了 <td> 


了 <div id="maleLockerRoom" class="lockerRoom"> 





<div id="ext-gen3" style="position: relative; left: 9pxji top: 8px;">Jack</div> 
<div id="ext-gen4"> Aaron </div> 
<div id="ext-gen5"> Abe </div> 


图 12-6 ”观察 拖 动 操作 给 Jack 元 素 带 来 的 变化 


可 以 看 到 ,已 经 把 Jack 元 素 拖 动 了 一 点 点 Ext .9d.DD 则 依次 地 把 样式 属性 加 到 元 素 上 ， 
这 些 样式 会 改变 position、 se 寺 征 。 明 白 了 这 一 点 是 很 重要 的 ， 因 为 使 用 
Ext .dd.DD 会 导致 屏幕 上 的 元 素 的 位 置 变化 ,这 一 点 和 我 们 即将 要 介绍 的 Ext .dq .DDProxy 是 极 
为 不 同 的 。 

最 后 我 们 要 讨论 的 是 拖 动 元 素 如 何 被 看 上 去 放 入 到 某 个 地 方 。 乍 看 之 下 ,这 极其 酷 炫 ,确实 
如 此 ,但 是 其 实 并 没有 什么 用 。 要 想 让 它 有 用 ， 需 要 从 它 加 上 约束 条 S 件 。 

要 达到 这 一 目标 , 需要 创建 一 些 容器 以 便 能 够 把 它们 放 进 去 , 这 就 是 要 创建 游泳 池 和 热 水 浴 
包 给 这 些 人 享受 的 地 方 。 


12.2.4 增加 泳池 各 丸 水 浴 和 作为 放置 目标 


就 像 前 面 做 过 的 那样 ， 添 加 一 些 CSS 文 件 来 为 HTML 提 供 样 式 。 把 如 下 的 CSS 文 本 添加 到 
文档 的 style 标 签 下 去 。 它 们 会 分 别 把 泳池 的 背景 色 设 置 为 蓝 色 ， 把 热 水 浴 向 的 设置 为 红色 : 


















































.Dool { 

background-color: #CCCCFF; 
} 
-otTu:< 

background-color: #FFCCCC; 





} 
现在 需要 把 HTML 代 码 添加 到 文档 体内 。 在 更 衣 室 HTML 代 码 后 面 添 加 如 下 的 HTML 标 记 : 


<table> 
人 七 
<tQ align='center'> 
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Pool 

Cy ATs bs 

<td align='center'> 
Hot Tub 

</td> 


帮 / 生生 人 
和 


< 七 Q> 

<div id="pool" class="lockerRoom Poo1" /> 
/td 
< 七 Q> 

<div id="hotTub" class="lockerRoom hotTub"/> 
</td> 


A 
</table> 


这 上段 代码 给 出 了 构建 放 入 目标 的 元 素 。 图 12-7 展 示 了 现在 HTML 页 面 是 演 染 的 样子 。 












































男 更 衣 室 女 更 衣 室 
Jack Sara | 
Aaron Jill 
Abe Betsy 
泳池 热 水 浴 红 














图 12-7 演 染 在 屏幕 上 的 游泳 池 和 热 水 浴 饶 








你 已 经 添加 了 现在 所 需 的 所 有 HTML , 现在 必须 要 'pool' 和 'hotTub' 设 置 为 DropTargets 
了 。 这 使 得 它们 可 以 作为 拖 放 中 的 放 入 部 分 参与 进来 。 需 要 添加 这 段 代 码 到 代码 清单 12-2 的 





Javascript 代 码 之 后 : 
Var poolDDTarget = new Ext.dd.DDTarget ('pool', 'males'); 
Var hotTubDDTarget = new Ext.dd.DDTarget ('hotTub', 'females'); 


这 里 为 'pool' 和 'hotTub' 元 素 分 别 创建 了 一 个 EE .dqa.DDTarget 的 实例 。DDTarget 构 造 器 的 





























第 一 个 参数 是 元 素 的 ID ( 或 者 是 DOM 引 用 )。 第 二 个 参数 是 ppTarget 要 参与 的 组 。 


现在 刷新 页 面 并 拖 放 一 个 男士 节点 到 泳池 节点 ， 或 者 拖 放 一 个 女士 节点 到 热 水 浴 缸 节 点 上 。 


当 放 置 节点 殖 





I 目标 上 时 发 生 什 么 了 ?你 猜 对 了 : 什么 都 没有 发 生 。 为 什么 呢 ? 对 了 , 这 是 因为 构 








建 了 一 些 拖 动 元 素 和 放 入 目标 用 来 完成 拖 放 功 能 展示 , 但 是 记 住 接 下 去 的 开发 实现 就 要 你 自己 负 
责 了 。 你 需要 为 放 入 引导 、 有 效 或 者 无 效 的 放 入 开发 代码 。 你 将 会 看 到 ， 这些 是 最 多 需要 为 拖 放 
功能 写 代 码 的 地 方 ， 这 也 是 接 下 去 我 们 要 做 的 。 


12.3 ”完成 你 的 拖 放 实现 


如 前 所 述 , 我 们 很 容易 设置 可 拖 放 的 元 素 , 设置 为 放 入 目标 也 是 如 此 。 但 是 ,除非 你 把 i 





















































化 
[8 
后 
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单独 的 点 元 素 连接 起 来 ， 否 则 结 
要 添加 放 入 引导 、 有 效 及 无 效 的 行为 , 需要 重 构 配置 可 拖 动 元 素 的 代码 。 你 将 从 添加 最 后 的 
一 个 CSS 类 开始 ， 它 会 把 放 入 目标 变 为 绿色 作为 放 入 引导 : 


.dropZoneOver { 


background-color: 


} 





就 是 一 堆 没 有 路 相连 的 源头 和 目标 。 





#99FF99;; 





这 段 CSS 很 简单 ， 任 何 有 这 个 类 的 元 素 都 会 有 一 个 绿色 的 背景 。 接 下 来 ， 需 要 构建 一 个 将 作 
用 于 每 一 个 Ext .qq.DD 实 例 的 overriaes 对 象 ， 重 构 一 下 为 男士 元 素 和 女士 元 素 添 加 拖 动 功能 





的 代码 块 。 


12.3.1 增加 放 入 引导 


要 增加 一 个 放 入 引导 , 你 需要 完全 地 替换 掉 初始 化 放 入 目标 的 代码 。 下 面 的 代码 清单 展示 了 
需要 用 到 的 东西 ， 它 会 定义 有 效 和 无 效 的 行为 。 


代码 清单 12-3 ” 重 构 ] 


var 
二 
var 
Ext 
添加 . 
放 入 }) 
渴 梳 va 
Ext 


}); 





overrides = { 





Ext .dd .DD 实现 


targetEl.addCls('dropZoneOver'); 





onDragEnter : function(evtObj, targetEl1Id) { 
Var targetEl = Ext.get (targetEl1d); 0 添加 放 入 引导 创建 覆 
盖 对 象 
I 


}, 


onDragOut : function(evtObj, targetElId) { 
Var targetEl] = Ext.get (targetEl1Id); 移出 放 入 引导 
) - 


targetEl.toggleCls('dropZoneOver'); 


}, 





isTarget : false 


J 


Ext .apply (dd, overrides); 


femaleElements = 


Ext .get ('femaleLockerRoom') .select ('div'); 


.each (femaleElements.elements, function(el) { 


Var dd = new Ext.dd.DD(el, 'females', { 
isTarget : false 


}y 


Ext .apply (dd, overrides); 


代码 清单 12-3 创 建 了 对 象 overrides， 这 一 对 象 会 被 应 用 到 即将 会 创建 的 
你 总 共 需 要 覆盖 5 个 方法 来 获得 期 望 的 结果 ， 但 是 现在 仅仅 需要 覆盖 on 























b4StartDrag : Ext.emptyFn 

onInvalidDrop : Ext.emptyFn 

onDragDrop : Ext .emptyFn, 

endDrag : Ext.emptyFn 

maleElements = Ext.get('maleLockerRoom') .select('div'); 设置 男士 被 
.each (maleElements.elements, function(el) { 拖 放 元 素 
Var dd = new Ext.dd.DD(el, 'males', { 


为 DD 实例 覆盖 方法 


Ext .DD 实例 上 。 


Enter@@ 和 





Drag 
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onDragout@ 方 法 。 

记 住 onDragEnter 仪 会 在 拖 动 元 素 第 一 次 碰 到 同 组 内 的 拖 放 元 素 时 被 调用 。 往 这 一 方法 中 
添加 了 'gdropzoneOver' 这 一 CSS 类 ， 将 会 把 放 入 元 素 的 背景 颜色 改变 为 绿色 ， 以 提供 所 需要 的 
放 入 引导 。 

同样 ，onDragout 方 法 仪 会 在 第 一 次 离开 同 组 内 的 拖 放 元 素 时 被 调用 。 通过 这 个 方法 , 引导 
巴 放 入 元 素 的 背景 色 移 除 咎 。 

现在 我 们 先 把 b4startDrag、onInvalidqDrop 、onDragDrop 和 enaqDrag 这 4 个 方法 放 到 一 
边 , 后面 再 来 写 它 们 。 我 们 不 想 现在 就 来 弄 这 些 ， 因 为 想 让 你 把 精力 集中 在 添加 的 这 些 行 为 和 约 
束 条 件 上 。 但 如 果 好 奇 的 话 ， 你 会 使 用 b4startprag 来 获得 拖 动 元 素 的 原始 XY 、7 坐 标 。 这 些 坐 
标 数据 会 被 用 在 onInvaliqprop 方 法 上 ， 它 会 作为 临时 变量 来 说 明 这 一 方法 被 触发 了 。 
onDragDrop 方 法 会 被 用 来 把 拖 动 节点 从 原始 的 容 屁 中 放 入 到 放 入 目标 容 带 内 。 最 后 ，endDrag 
方法 会 在 invalidqDrop 属 性 为 true 的 情形 下 重 设 拖 动 元 素 的 位 置 。 

要 使 用 overrigdes 对 象 ， 需要 重 构 初 始 化 包括 男士 和 女士 拖 动 对 象 @ 的 代码 。 这 么 做 是 
为 想 要 阻止 拖 动 元 素 成 为 一 个 放 入 目标 ， 正 因此 需要 在 DD 构造 器 上 添加 第 三 个 参数 ， 这 意 
味 着 这 是 一 个 被 限制 了 一 点 的 对 象 。 你 将 会 明白 这 里 说 的 被 限制 了 一 点 点 是 什么 意思 。 在 那 
个 配置 参数 里 把 isTarget 各 设置 为 false,， 这 把 该 拖 动 元 素 的 控制 行为 限制 成 不 能 成 为 放 入 
目标 。 

最 后 ， 把 overrides 对 象 应 用 到 了 新 创建 的 Ext .DD 的 实例 上 @。 前 面 我 们 说 到 配置 对 象 仅 
仅 可 用 来 构建 有 限 数量 的 属性 。 这 么 说 是 因为 现在 Ext JS 中 的 拖 放 代码 在 Ext JS 1.0 时 代 就 已 经 写 
了 , 那 时 大 多 数 构造 器 直接 把 配置 属性 应 用 到 自身 上 。 这 就 是 为 什么 需要 使 用 Ext .apply 来 注入 
覆盖 方法 ， 而 不 是 像框 架 中 的 大 多 数 构造 器 那样 直接 赋值 到 配置 对 象 上 。 

你 已 经 增加 了 引导 功能 的 代码 了 。 让 我 们 来 看 一 下 当 尝 试 拖 动 一 个 男士 节点 到 泳池 或 者 是 热 
水 浴缸 时 会 发 生 什么 吧 〈 人 参见 图 12-8 )。 
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男 更 衣 室 女 更 衣 室 女 更 衣 室 
sara | 
泳池 热 水 浴 人 缸 热 水 浴 饶 











图 12-8 ”男士 节点 的 放 入 引导 条 件 


基于 你 对 拖 放 和 代码 细节 的 了 解 ， 拖 动 一 个 男士 节点 到 同 组 内 的 放 入 目标 上 ( 想 想 
onDragDrop ) 将 会 触发 一 个 放 入 引导 ， 就 是 如 图 所 示 看 到 放 入 目标 的 背景 色 变 成 绿色 。 当 你 把 
一 个 拖 动 元 素 移出 同一 个 放 入 目标 时 ( 想 想 onpragout )， 背 景色 就 会 变 成 原来 的 状态 ， 放 人 引 
导 消 失 了 。 
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相反 , 拖 动 一 个 男士 元 素 到 任意 其 他 的 放 和 人 目标 上 (比如 热 水 浴 人 缸 上 ) 则 不 会 有 任何 引导 提 
示 。 为 什么 会 这 样 呢 ? 'hotTub ' 元 素 上 没有 放 人 引导 是 因为 热 水 浴缸 和 males 放 人 组 没有 任何 
关联 。 

你 可 能 注意 到 了 男 外 一 件 事 。 如 图 12-9 所 示 ， 可 以 拖 动 一 个 女士 元 素 到 热 水 浴 氏 上 并 触发 
'hotTub' 的 放 入 引导 而 不 是 游泳 池 的 。 这 是 因为 热 水 浴 生 仅仅 和 females 元 素 相 关联 。 



























































女 更 衣 室 男 更 衣 室 男 更 衣 室 
Bara 
Jack J 
Jill Aaron Aaron 
Betsy Abe Abe 
热 水 浴 缸 泳池 六 池 
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图 12-9 女士 节点 的 放 入 引导 条 件 


器 


虽然 这 很 好 地 展示 了 放 人 引导 , 但 还 是 应 该 设置 泳池 和 热 水 浴 仙 能 够 同时 接受 男士 和 女士 节 
点 ; 要 做 到 这 一 点 ， 需 要 用 一 个 附加 组 来 注册 它们 。 你 需要 调用 adadaroGroup 方 法 并 传人 一 个 替 
代 的 组 。 下 面 是 ' Pool 和 和 'hotTub' 元 素 注 册 为 DDrTarget 并 附加 了 addToGroup 方 法 调用 : 























Var poolDDTarget = new Ext.dd.DDTarget ('pool', 'males'); 
poolDDTarget .addToGroup('females');} 
Var hotTubDDTarget = new Ext.dd.DDTarget ('hotTub', 'females'); 


hotTubDDTarget .addToGroup('males'); 


在 例子 中 注入 这 些 代 码 之 后 , 请 刷新 页 面 。 你 将 会 看 到 'pool' 和 'hotTub' 放 入 元 素 现 在 引 
导 放 入 操作 了 ,但 是 当 放 入 一 个 拖 动 元 素 到 有 效 的 放 入 目标 上 时 ,会 发 生 什 么 ?什么 都 没有 发 生 。 
这 是 因为 还 没有 为 有 效 的 放 入 操作 写 代 码 。 

接 下 来 我 们 就 来 完成 这 一 任务 。 


12.3.2 ”增加 有 效 放 入 


要 给 拖 放 代码 添加 有 效 放 入 行为 ,需要 替换 overriaqes 对 象 中 的 onpragDrop 方 法 ， 如 下 面 
的 代码 清单 所 示 。 


代码 清单 12-4 ”给 overrides 添 加 有 效 放 入 
onDragDrop : function(evtObj, targetEl1Id) { 
var dragEl = Ext.get (this.getEl()); 
Var dropEl = Ext.get (targetEl1d); 
if (dragEl.dom.parentNode.id != targetElId) { 
dropEl.appendChild(dragEl); 
this.onDragOut (evtObj, targetElId); 
dragEl.dom.style.position ="''; 
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else { 
this.onInvalidDrop(); 

: } 

在 onDragDrop 方 法 中 ， 写 了 一 次 成 功 (有 效 ) 地 放 入 操作 的 代码 。 为 此 ， 首 先 需 要 给 拖 动 
和 放 入 元 素 创建 一 个 本 地 引用 。 

下 一 步 有 一 个 if 条 件 语句 ， 它 用 来 判断 拖 动 元 素 父 节点 的 1d 是 不 是 和 放 入 目标 的 1g 相同。 
这 保证 了 不 会 对 已 经 是 放 入 目标 的 子 节点 的 拖 动 元 素 执 行 放 入 操作 。 如果 放 入 目标 元 素 与 拖 动 元 
素 的 父 节 点 不 同 ， 就 允许 执行 放 入 操作 ; 否则 ， 调 用 onInvaligDprop 方 法 ， 稍 后 我 们 就 会 实现 
这 个 方法 。 

把 一 个 拖 动 元 素 从 一 个 父 容器 移动 到 另 一 个 父 容器 的 代码 是 简单 的 。 调 用 放 入 元 素 的 
appendCchi1l6 方 法 , 传人 放 入 的 元 素 即 可 。 记 住 ， 尽管 Ext .a9 .DD 允许 在 屏幕 上 移动 拖 动 元 素 ， 
它 仅仅 是 改变 、7 蔡 标 而 已 。 如果 不 把 一 个 拖 动 元 素 移动 到 另外 一 个 父 节 点 上 , 它 仍然 将 会 属于 
它 原始 的 容器 。 

接 下 来 调用 了 onpragout 覆 盖 方 法 ， 它 会 消除 放 入 引导。 注意 ,传人 了 eventopbj 和 
targetE1Id 人 参数 给 onDragout 方 法 。 正 是 基于 此 ， onDragout 才 能 够 按照 预期 完成 本 职工 作 。 

最 后 ， 清 除了 元 素 的 style.position 属 性 。 回 想 一 下 ，DD 设 置 位 置 为 relative， 这 在 该 
点 从 一 个 父 节 点 拖 放 人 另 一 个 之 后 就 不 需要 了 。 

这 样 就 结束 了 对 onDragDrop 方 法 的 覆盖 ,图 12-10 展 示 操 作 结 果 。 正 如 图 中 所 显示 的 ， 可 以 
成 功 地 把 男士 和 女士 元 素 放 到 'pool' 和 'hotTub' 这 两 个 放 入 元 素 中 去 ,成功 地 呈现 
onDragDrop 所 起 的 作用 。 
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图 12-10 ”男士 和 女士 节点 现在 可 以 被 放 和 人 到 游泳 池 和 热 水 浴 低 这 两 个 放 入 目标 上 了 


虽然 说 能 够 把 男士 和 女士 元 素 放 和 到 泳池 或 者 是 热 水 浴 缸 是 一 件 美 事 , 但 是 不 能 让 他 们 永远 
呆 着 那里 ， 否 则 他 们 会 发 霉 的 ,你 需要 能 够 把 他 们 拉 出 来 并 放 回 到 更 衣 室 。 尝 试 把 他 们 拖 动 回 相 
应 的 更 衣 室 时 又 会 发 生 什 么 呢 ? 没有 引导 。 为 什么 ?” 对 了 ， 因 为 你 没有 把 更 衣 室 注册 成 
DDTargetso 现在 就 做 吧 : 





























var mlrDDTarget 
var flrDDTarget 


new Ext.dd.DDTarget ('maleLockerRoom', 'males'); 
new Ext.dd.DDTarget ('femaleLockerRoom', 'females'); 
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把 这 段 代码 添加 到 拖 放 代 码 的 底部 , 这 使 得 男士 拖 动 元 素 可 以 被 引导 放 入 到 除了 女士 更 衣 室 
的 所 有 放 入 目标 上 。 同样 地 ,女士 拖 动 元 素 可 以 被 放 入 到 除了 男士 更 衣 室 的 所 有 放 入 目标 上 。 这 
也 符合 公共 场所 很 少 有 男女 公用 更 衣 室 的 惯例 。 

现在 完成 了 放 和 人 操作 的 所 有 内 容 。 最 后 要 实现 的 内 容 是 无 效 放 和 行为， 这 就 是 你 接 下 来 的 
工作 。 


12.3.3 ”实现 无 效 放 入 


你 可 能 已 经 注意 到 ， 当 放 入 一 个 节点 在 屏幕 上 任意 的 无 效 地 点 ,这 个 节点 就 会 停留 在 这 个 无 
效 的 地 点 上 。 这 是 因为 需要 构建 无 效 的 放 入 行为 , 它 会 把 元 素 放 回 到 原始 的 位 置 上 去 。 你 将 会 用 
到 Ext.fx 类 作为 样式 。 下 面 的 代码 清单 替换 了 overriqes 对象 的 b4StartDrag 和 


onInvalidDrop 方 法 。 


代码 清单 12-5 ”在 无 效 放 入 之 后 的 清除 操作 









































一 





b4StartDrag function() { 二 
var dragEl = Ext.get (this.getEl()); 壮 > 
this.originalxY = dragEl .getxY(); 覆盖 b4startprag 方 法 
}, 
onInvalidDrop : function() { 
. this.invalidDrop = true; a 将 this.invalidprop 设 为 true 
endDrag : function() { 
if (this.invaligdDrop === true) { 动态 化 拖 动 元 素 返 回 
var dragEl = Ext.get (this.getEl()); 
Var animCfgObj = { 
easing : 'elasticOut', 
duration : 1, 
callback : function() { ee 重 设 拖 动 元 素 位 置 
dragEl.dom.style.position = '';} 


} 
}3 
dragEl .moveTo(this.originalxXY[0], this.originalXY[1], animCfgObj) 
delete this.invalidDrop; 
} a 
} 拖 动 元 素 
代码 清单 12-$ 首 先 覆 盖 了 b4StartDrag@@ 方 法 ， 这 个 方法 在 拖 动 元 素 被 拖 动 的 瞬间 执行 。 
这 时 可 以 把 拖 动 元 素 的 原始 XY、7 坐 标记 录 下 来 ， 用 于 后 续 的 修复 操作 。 修 复 一 个 无 效 的 放 入 意 
味 着 重 设 拖 动 元 素 或 者 其 代理 ( 马上 就 会 提 到 ) 的 坐标 为 拖 动 动作 发 生前 的 位 置 。 
接 下 来 覆盖 了 onTnvalidDrop@@ 方 法 ， 它 会 在 拖 动 元 素 没 有 被 放 人 到 同 组 中 有 效 的 放 人 地 
点 的 时 候 被 调用 。 这 个 方法 中 所 要 做 的 仅仅 是 把 一 个 本 地 变量 invaligProperty 设 置 成 为 
true， 这 将 会 在 接 下 来 的 方法 engDrag 中 被 使 用 到 。 
最 后 有 覆盖 endDrag 全 方法 ， 它 在 本 地 变量 invaligdProperty 为 true 时 会 执行 修复 操作 。 
它 也 会 用 到 pbp4startprag 设 置 的 本 地 变量 originalxY。 这 个 方法 创建 了 一 个 配置 对 象 用 作 动 
画展 示 。 
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在 这 个 配置 对 象 中 设置 easing 为 "elasticout '， 这 将 使 得 元 素 在 动画 结束 前 有 一 个 平 
滑 的 效果 ,并且 把 quration 设 置 成 一 秒 钟 。 这 保证 了 动画 效果 平滑 而 不 生 深 。 你 还 要 创建 一 
个 回调 方法 来 重 设 拖 动 元 素 的 style .position 属 性 @, 这 确保 了 拖 动 元 素 完全 与 它 要 做 的 事 


情 名 昭 o 




















注意 如 果 放弃 动画 效果 ， 仅 仅 是 重 设 一 下 拖 动 元 素 的 位 置 ， 这 样 onInvalidDrop 只 需要 把 
style.position 设 置 为 一 个 空 字符 串 ， 如 : dragFEl.dom.style.position = '';。 








接 下 来 调用 拖 动 元 素 的 noveToe 方 法 ， 传 人 7 和 了 给 标 值 作 为 第 一 个 和 第 二 个 参数 ， 动 画 效 果 
配置 对 象 作 为 第 三 个 。 这 会 触发 拖 动 元 素 的 动画 效果 。 

最 后 需要 删除 本 地 引用 invaliaDprop ， 因 为 我 们 不 再 需要 它 了 。 你 需要 刷新 页 面 来 看 这 三 
个 履 羡 方法 是 如 何 工作 的 。 

当 拖 动 一 个 元 素 并 把 它 放 入 到 一 个 不 相关 联 的 放 入 元 素 上 时 , 它 会 滑 回 它 原 始 的 位 置 。 在 它 
靠近 目标 、7 坐 标 位 置 的 时 候 会 有 反弹 的 效果 人 @。 

你 现在 全 面 了 解 如 何 用 Ext .qa.DD 和 Ext .dg.DDTarget 来 实现 拖 放 功 能 了 。 接 下 来 ,我 们 
开发 类 似 的 DDProxy 类 。 


















































12.4 使 用 DDProxy 


在 开发 拖 放 功 能 过 程 中 , 拖 动 代理 是 很 常见 并 值得 尝试 的 , 因为 拖 动 代理 的 实现 和 DD 相 似 但 
又 有 所 不 同 。 这 是 因为 DDProxy 类 允许 拖 动 一 个 拖 动 元 素 的 轻 量 级 版 本 ,这 就 是 拖 动 代理 。 使 用 
DDProxy 可 以 在 拖 动 元 素 很 复杂 的 情况 下 极 大 地 提升 性 能 。 其 中 一 部 分 性 能 的 提高 来 自 于 
DDProxy 的 每 一 个 实例 都 在 使 用 DOM 组 件 中 同一 个 代理 aiv。 记 住 拖 动 代理 就 是 屏幕 上 被 拖 动 着 
的 元 素 ， 这 会 有 助 于 理解 代码 实现 。 

在 这 个 例子 中 ， 你 还 会 用 到 前 面 已 经 用 的 HTML 和 CSS, 如 果 你 打算 在 实现 中 使 用 拖 动 代理 ， 
我 们 也 会 提供 一 个 相应 的 模式 。 

首先 ， 需 要 在 页 面 上 增加 如 下 一 条 CSS 规 则 ， 这 将 会 把 拖 动 代 理 的 背景 色 设 置 为 黄色 : 


.ddProxy { 
background-color: #FFFFOO; 





















































} 
你 将 会 遵循 实现 DD 类 的 流程 。 开 发 的 时 候 ， 你 会 发 现实 现 DDProxy 类 相 较 于 DD 类 会 多 用 一 

些 代码 。 

实现 DDProxy 类 以 及 放 入 引导 


DDProxy 类 负责 创建 和 管理 可 重用 的 代理 元 素 的 X.Y 坐 标 ,并 由 你 负责 给 它 添加 样式 和 内 容 。 
你 需要 覆盖 startDrag 方 法 来 做 到 这 些 ， 而 不 是 实现 DD 时 用 的 b4Drag 方 法 。 
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在 代码 清单 12-6 中 , 将 创建 一 个 DDProxy 实 例 的 overrigdes 对 象 , 而 要 让 这 段 代 码 清 单 正常 
工作 ， 需 要 用 到 下 面 这 段 CSS 代 码 : 


.lockerRoom div, .lockerRoomChildren { 


border : lpx solid #FF0000; 
background-color : #FFFFFF; 

padding ;2pxX; 

margin 区 

Cursor : move; 


} 
这 段 代 码 很 长 ， 但 其 实 你 已 经 完成 了 其 中 不 少 内 容 了 。 
代码 清单 12-6 ”实现 放 入 引导 


var overrides = { 





startDrag function() { 
Var dragProxy = Ext.get (this.getDragEl()); 覆盖 startDrag 方 法 
var dragEl = Ext.get (this.getEl()); 
dragProxy.addClass('lockerRoomChildren'); 
dragProxy .addClass ('ddProxy'); 
dragProxy.setOpacity(.70); 
dragProxy .update (dragEl .dom.innerHTML); 样式 化 DragProxy 
dragProxy.setSize(dragEl .getSize()) 
this.originalxY = dragEl .getxY(); 
Pig 
onDragEnter : function(evtObj, targetElId) { 
Var targetEl] = Ext.get (targetElId); 添加 放 入 引导 
targetEl.addClass('dropzoneOver'); 
js 
onDragOut : function(evtObj, targetElId) { 
Var targetEl] = Ext.get (targetElId); 
targetEl.removeClass('dropzoneOver'); 





}, 
onInvalidDrop : function() { 
this.invalidDrop = true; 
Ps 添加 onDragDrop 
onDragDrop : Ext.emptyFn 存根 类 
}3 
var maleElements = Ext.get('maleLockerRoom') .select('div'); 
Ext .each (maleElements.elements, function(el) { 
Var dd = new Ext.dd.DDProxy (el, 'males', { 
isTarget : false 
下 
Ext .apply (dd, overrides); 





小 
Var femaleElements = Ext.get('femaleLockerRoom') 
Ext .each (femaleElements.elements, function(el) { 
Var dd = new Ext.dd.DDProxy (el, 'females', { 
isTarget : false 


.Select ('div'); 


3 
Ext .apply (dd, overrides); 
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在 代码 清单 12-6 中 ， 给 代理 对 象 添加 了 样式 、 放 入 引导 ， 并 为 每 个 元 素 初 始 化 了 一 个 
Ext .dd .DDProxy 实 例 。 下 面 我 们 看 看 它 是 怎么 工作 的 。 

startDrag 方 法 @@ 首 先 给 DragProxy 元 素 添 加 1ockerRoomChildren 和 qddProxy 两 个 CSS 
类 @@， 以 便 给 拖 动 元 素 提 供 样式 。 接 着 ， 它 把 代理 对 象 的 不 透明 度 设置 为 70%， 并 从 拖 动 元 素 上 
包 内 容 复制 下 来 。 然 后 再 把 DragProxy 对 象 的 大 小 设置 为 拖 动 元素 的 大 小 。 然 后 还 会 设置 
rginalXY 属 性 ， 这 个 给 接 下 去 可 能 的 无 效 放 入 的 修复 操作 使 用 的 。 

接 下 来 通过 履 盖 cnpragEnter 和 onDragDrop 方 法 加 添加 放 和 人 引导 。 这 和 前 面 的 实现 完全 一 
样 。onIinvalidqDrop 的 覆盖 也 和 之 前 一 样 。 最 后 要 覆盖 的 是 onDragDrop 方 法 全 的 存根 类 , 你 只 
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在 使 用 放 人 引导 之 前 ， 需 要 把 泳池 、 热 水 浴缸 和 更 衣 室 元 素 设置 为 放 入 目标 : 


Var poolDDTarget = new Ext.dd.DDTarget ('pool', 'males'); 

poolDDTarget .addToGroup('females'); 

Var hotTubDDTarget = new Ext.dd.DDTarget ('hotTub', 'females'); 
hotTubDDTarget .addToGroup('males'); 

Var mlrDDTarget = new Ext.dd.DDTarget ('maleLockerRoom', 'males'); 

Var flrDDTarget = new Ext.dd.DDTarget ('femaleLockerRoom', 'females'); 





现在 已 经 设置 好 这 一 切 , 可 以 尝试 使 用 一 下 已 经 写 了 一 部 分 的 DpProxy 了 。 请 刷新 页 面 ， 然 
后 拖 一 个 拖 动 元 素 。 图 12-11 展 示 了 一 个 拖 动 代理 工作 时 候 的 样子 。 








男 更 衣 室 女 更 衣 室 
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Jill 
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泳池 | 热 水 浴 缸 


| 
图 12-11 DDProxy 在 一 个 男士 拖 动 元 素 上 发 生 作用 了 


正如 你 所 见 到 的 , 在 一 个 可 拖 动 的 元 素 上 执行 拖 动 操作 会 生成 出 一 个 DragProxy, 它 被 拖 来 
拖 去 , 但 是 拖 动 元 素 本 身 却 保持 原样 。 你 还 可 以 看 到 放 入 引导 如 何 工 作 的 。 当 放 入 一 个 拖 动 元 素 
到 一 个 有 效 或 者 无 效 的 放置 目标 上 ， 会 发 生 什么 呢 ? 

在 这 两 种 情形 下 ， 拖 动 元 素 都 会 被 移动 到 DragProxy 的 最 后 可 知 的 坐标 地 点 ， 这 模拟 了 DD 
类 在 没有 放 人 操作 有 效 性 约束 下 的 行为 。 

接 下 来 需要 增加 这 些 。 下 面 的 代码 清单 包含 了 DDProxy 的 实现 。 


代码 清单 12-7 添加 有 效 和 无 效 的 放 入 行 > 
































onDragDrop : function(evtObj, targetElId) { 
var dragEl = Ext.get (this.getEl()); 3 覆盖 onpragprop 方 法 
Var dropEl = Ext.get (targetElId); 
if (dragEl.dom.parentNode.id != targetEl1Id) { 


dropEl.appendChild(dragEl); 
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this.onDragOut (evtObj, targetElId); 
dragEl.dom.style.position ="" 
} 
else { 
this.onInvalidDrop(); 
} 
上 
b4EndDrag : Ext.emptyrFn, 
endDrag : function() { 
Var dragProxy = Ext.get (this.getDragEl ()); 
if (this.invalidDrop === true) { 
var dragEl = Ext.get (this.getEl()); 
Var animCfgObj = { 
easing : 'easeOut', 
duration : .25, 
callback : function() { 
dragProxy.hide(); 
dragEl.highlight (); 
| 
J 
dragProxy .moveTo (this.originalXY[0]， 
this.originalxY[1], animCfgObj); 
} 


禁止 代理 在 拖 
动 结束 前 隐藏 


2 覆盖 engDrag 方 法 


6 修复 


else { 

dragProxy .hide(); 
| ey 
delete this.invalidDrop; 2 人 


} 


代码 清单 12-7 完 成 了 剩余 的 DDProxy 的 实现 ,增加 了 onDragDrop、b4EndDrag 和 endDrag 


的 覆盖 方法 。 








onDragDrop@ 方 法 和 DD 实现 中 是 完全 一 样 的 ， 就 是 当 放 入 元 素 和 拖 动 元素 的 父 元 素 不 一 样 
时 就 允许 放 入 操作 ， 并 把 这 个 节点 移动 到 放 人 元素 上 去 。 否 则 就 调用 Invalidqprop 方 法 ， 这 会 





把 invalidqDrop 属 性 设置 为 Etrue。 























b4EndDrag 方 法 @@ 故 意 用 Ext .emptyFn ( 空 图 数 ) 引用 来 覆盖 。 这 么 做 是 因为 DDProxy 的 





b4EndDrag 方 法 在 sndDrag 方 法 被 调用 之 前 会 把 DpProxv 隐 藏 起 来 ,这 和 想 要 执行 的 动画 相 冲 突 
了 。 隐 藏 DragProxy 然 后 又 显示 出 来 很 浪费 ， 所 以 用 空 函 数 来 覆盖 b4EndDrag 方 法 来 阻止 它 被 














在 先前 DD 的 实现 中 ，engdDrag 方 法 合用 在 invaligprop 被 设置 为 Lrue@ 的 情形 下 做 修复 操 
作 。 但 是 这 里 需要 模拟 DragProxy ， 而 不 是 拖 动 元 素 本 身 。 通 过 设置 easeout 可 以 使 得 动画 效果 





























更 光滑 。 回 调 方法 会 隐藏 DragProxy, 然后 调用 拖 动 元 素 的 高 亮 效 果 方 法 , 并 以 动画 效果 把 背景 





色 从 黄色 变 成 白色 。 
最 后 ， 如 果 调 用 sndqDrag 方 法 的 时 候 ， invalidDrop 
藏 @ 代 理 元 素 ， 并 完成 DDProxy 的 实现 。 





属 怕 





FE 没 有 被 设置 ， 它 就 会 从 视图 上 隐 








给 通用 DOM 元 素 开 发 全 部 的 拖 放 功 能 需要 一 些 工 作 以 及 对 拖 放 类 层次 结构 的 基本 理解 ， 回 
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报 是 你 可 以 在 屏幕 上 酷 炫 地 拖 放 元 素 ， 还 给 用 户 带 来 了 一 些 额外 的 小 功能 。 
让 我 们 继续 来 看 看 Ext JS 组 件 上 的 拖 放 功能 。 你 可 以 在 我 们 已 经 讨论 过 的 基本 概念 上 进行 探 
索 。 首 先 ， 我 们 来 看 视图 上 的 扼 放 。 


12.5 视图 的 拖 放 


假使 要 开发 一 个 程序 , 让 经 理 可 以 通过 简单 的 拖 放 手势 跟踪 雇员 在 职 还 是 在 休假 。 为 此 需要 
构建 两 个 视图 ,两 者 和 你 早先 创建 过 的 都 很 类 似 。 要 让 它们 可 用 ， 需 要 做 一 些微 小 的 修改 ， 其 中 
包括 允许 多 节点 选择 。 这 将 是 一 个 在 组 件 上 使 用 拖 放 的 绝 佳 示例 。 图 12-12 展 示 了 在 一 个 
Ext .Window 上 封装 了 两 个 视图 。 












































Employees in office Employees on vacation 


Acevedo, Hillary 
Department: 
Email:hillary.acevedo@mycompany.com 








= 从 

Acevedo, Kimberl 
Department: 

Acevedo, Kimberley 
Email:kimberley.acevedo@mycompany.com Department: 
ES Stone Email:kmberley.acevedo@mycompany.com 
二 
Bren a Acevedo, Hilla 
mail:stone.acevedo@mycompany.com Department: 





Email:hillary.acevedo@mycompany.com 





Acevedo, Venus 
Department: 
Email:venus.acevedo@mycompany.com 








Acosta, Cadman 
Department: 
Email:cadman.acosta@mycompany.com 





Acosta, Joan 
Department: 


图 12-12 ”两 个 视图 


现在 知道 需要 做 什么 了 ， 让 我 们 开始 吧 。 


12.5.1 构建 视图 


先 要 写 一 些 CSS， 用 来 给 视图 上 的 元 素 添 加 样式 。 拖 放 的 CSS 文 件 会 被 包含 进来 ， 让 我 们 在 
下 一 个 代码 清单 中 把 它 做 出 来 吧 。 


代码 清单 12-8 ”构建 视图 的 CSS 代 码 


<style type="text/css"> wt 为 整个 雇员 模板 aiv 添 加 样式 
.emplWrap { 
border: lpx #999999 solid; 
-mozZ-border-radius: 5px; 
-webkit-border-radius: 5px; 
margin : 3px; 
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padding : 3px; 
background-color: #ffffcc; 


2 设置 鼠标 悬 停 样式 
.emplOver { 


border: lpx #9999ff solid; 
background-color: #ccccff; 
cursor: pointer; 


emplSelecteqd { 
border: lpx #66ff66 solid; 设置 选中 雇员 样式 
background-color: #ccffcce; 
cursor: pointer; 


.emplName { 
font-weight: bold; 
margin-left: Spx; 
font-size: 14px; 
text-decoration: underline; 
Color: #333333; 


.emplAddress { 
margin-left: 20px; 
} 
</style> 


在 代码 清单 12-8 的 CSS 中 ， 给 视图 上 的 雇员 div 添 加 了 样式 。 没 有 被 选择 的 雇员 元 素 背 景 
色 是 黄色 的 @, 和 马尼拉 文件 袋 很 像 。 当 鼠标 悬 停 在 雇员 名 字 上 的 时 候 , 它 将 会 使 用 emp1over 
@ 这 个 CSS 类 把 它 变 成 蓝 色 。 当 被 选择 之 后 ， 雇 员 叉 会 被 emplselected 全 这 个 CSS 类 演 染 成 
绿色 。 
现在 有 了 视图 将 要 使 用 的 CSS 代 码 。 下 面 的 代码 清单 会 配置 两 个 存储 供 不 同 的 视图 来 使 用 。 


代码 清单 12-9 ”为 数据 视图 创建 存储 




































































Ext .define('Employee', { 
extend : 'Ext.data.Model', 创建 employee 模 型 
idProperty : 'id', 
fields ; 
{name : 'departmentName', type : 'string' }, 
'departmentName', 
'email', 
{ name : 'firstName', mapping : 'firstname' }, 
{ name : 'lastName', mapping : 'lastname' } 
] 
} 
Var inOfficeStore = Ext.create('Ext.data.Store', { 
model : 'Employee', a 配置 远程 存储 
autoLoad : true, 


proxy Ce 
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type SGN 
url : 'http://extjsinaction.com/getEmployees.php', 
reader : { 
type 2 OLEY; 
root : 'records', 
idProperty : 'id' 
} 
} 
ne 
3 创建 本 地 存储 
Var onVacationStore = Ext.create('Ext.data.Store', { 


model: 'Employee' 
) 


在 代码 清单 12-9 中 ,创建 一 个 雇员 模型 Q 和 两 个 存储 的 配置 对 象 。 第 一 个 存储 @ 用 Ajax 代 理 
来 获取 雇员 列表 ， 而 第 二 个 Jsonstore 合 则 静 静 地 等 待 放 入 操作 插入 进来 的 记录 。 
现在 数据 存储 已 经 配置 好 ， 可 以 创建 视图 了 ， 如 下 面 的 代码 清单 所 示 。 


代码 清单 12-10 ”构造 两 个 视图 
Var dvTpl = new Ext.XTemplatel 
'<tpl for=" I 为 视图 提供 XTemplate 
'<div class="emplWrap" id="employee_{id}">', 
'<div class="emplName">{lastName}, {firstName}</div>', 





























We ine 
'<span class="title">Department:</span>', 
' {departmentName}', 

'</div>', 

el 


'<span class="title">Email:</span>', 
'<a href="#">{email}</a>', 


TS 
'</div>', 

<AEBLS" 
> 2 创建 in-the-office 视 图 
Var inOfficeDv = Ext.create('Ext.view.View', { 

tpl TO 

store : inofficeStore， 

loadingText -Odadind.e, 

multiSelect : true, 

overItemCls : 'emplOver', 

selectedItemCls : 'emplSelected', 

itemSelector : 'div.emplWrap', 

emptyText : 'No employees in the office.', 

style : 'OVverflow:auto; background-color: #FFFFFF,;' 
De 
Var onVacationDv = Ext.create('Ext.view.View', { 

tpl Ue ee So 创建 on-vacation 视 图 

store : onVacationStore， 

loadingText LOadinid. 

multiSelect : true, 


overItemCls : 'emplOver', 
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selectedIitemCls : 


itemSelector 
emptyText 
style 

打字 


'emplSelected', 

'div.emplWrap', 

'No employees on vacation', 

'overflow:auto; background-color: #FFFFFF;' 





代码 清单 12-10 在 一 个 通用 的 xTemplate@ 实 例 的 基础 上 配置 和 构建 了 两 个 视图 。 
inOfficeDv@ 会 从 inofficestore 中 获取 数据 来 加 载 在 在 岗 的 雇员 列表 , 而 onvacationDv@ 
会 使 用 暂时 还 没有 人 的 onvacationStore。 

你 可 以 直接 在 屏幕 上 深 染 这 两 个 视图 。 但 是 ， 利 用 HBoxLayout 把 它们 并 排 地 放 在 一 个 窗口 
中 会 显得 更 好 看 ， 如 下 面 的 代码 清单 所 示 。 


代码 清单 12-11 把 视图 放 在 窗口 内 

















new Ext .Window(t{ 
Ee 人 6 为 视图 实例 化 窗口 
height : 400， 
width 1 5505 
border : false, 
layoutConfig : { align : 'stretch'}, 
items A 
{ 
title : 'Employees in the office', 
frame : true, 
ay 
items : inofficeDv， 
人 6。 将 视图 数据 放 入 面板 
{ 
title : 'Employees on vacation', 
frame : true, 
上 本 DRE 2 ft » 
iqd ST 
items : onVacationDV， 
flex 上 
} 
] 
}) .show(); 


代码 清单 12-11 创 建 了 一 个 Ext .window@ 实 例 ， 它 用 了 HBoxLayout 布 局 把 两 个 面板 并 列 等 
宽 地 放 在 一 起 ， 使 它们 的 高 度 被 拉 伸 到 正好 适应 窗 体 。 左 边 的 面板 是 在 在 岗 人 员 的 数据 视图 @， 








而 右边 的 面板 是 休假 中 人 员 的 数据 视图 ( 参见 图 12-13 )。 
视图 已 经 被 正确 地 演 染 了 , 在 岗 的 雇员 出 现在 左边 , 而且 目前 没有 人 正在 休假 。 有 了 这 些 之 














后 ， 你 就 可 以 添加 拖 放 操作 了 。 
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Employees on staff Employees on vacation 


Department: Customer Relations 
Email:chandlerbensonG@mycompanycom 





Benson, Chandler | 


Chase, Karyn 
Department: Sales and Marketing 


Email:karyn.chase@mycompany.com 


Colon, Genevieve 
Department: Advertising 
Email:genevieve.colon@mycompany.com 





Franklin, Scott 
Department: Sales and Marketing 
Email:scott.franklin@mycompany.com 


Hayes, Hanna 
Department: Finances 


Email:hanna.hayes@mycompany.com 


Hendricks, Griffin 人 
Department: Research and Development 2 








图 12-13 ”Ext .Window 组 件 上 泻 染 的 视图 





12.5.2 ”添加 拖 动 手势 


视图 拖 放 的 应 用 程序 比 给 网 格 或 者 树 形 面板 添加 拖 放 要 花 多 一 些 力气 。 这 是 因为 和 这 些 部 件 
不 同 ，View 类 没有 自己 的 pragzone 子 类 实现 供 直 接 使 用 ， 这 意味 着 你 不 得 不 制作 自己 的 
Dragzone 实 现 。 并 且 ， 你 还 需要 开发 DropZzone 来 管理 放 人 手势 。 

Dragzone 类 使 用 了 一 个 特殊 的 叫 statusProxy 的 代理 类 ， 它 会 使 用 图 标 来 提示 这 个 放 和 人 操 
作 是 否 是 成 功 的 。 图 12-14 展 示 了 它们 典型 情况 下 的 样子 。 


从 从 


© 3 Records @ 3 Records 




















图 12-14 ”StatusProxy， 左 边 提示 可 以 放 入 ,右边 表示 不 可 以 


默认 的 statusProxy 是 一 个 非常 轻 量 和 高 效 的 ， 但 是 有 点 无 趣 。 虽 然 它 提供 了 有 用 的 信息 ， 
但 是 用 来 很 是 无 趣 。 你 应 该 把 statusProxy 的 定制 功能 利用 起 来 ， 把 拖 动手 势 做 的 更 花哨 一 点 
儿 , 并 使 它们 更 加 有 趣 、 信 息 更 丰富 。 另 一 个 Dragzone 添 加 的 功能 是 自动 修复 无 效 的 放 人 场景 ， 
这 减轻 了 你 实现 这 段 代 码 的 负担 。 

首先 要 为 待 会 儿 要 写 的 pragzone 创 建 覆盖 对 象 。 因 为 数据 视图 必须 要 被 泻 染 给 拖 放 使 用 ， 
你 需要 在 代码 清单 12-11 下 面 插入 如 下 的 代码 。 


代码 清单 12-12 ”创建 Dragzone 有 履 盖 
var dragZoneOverrides = { 了 


containerScroll : true, 


9 禁止 aocument . body 滚 动 
scroll : false, 
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getDragData : function(evtObj)f{ le 
var dataView = this.dataView; ”@ 覆 益 setpragpata 方 法 
Var SourceE] = evtObj.getTarget (dataView.itemSelector, 10); 
if (sourceEl) { 
缓存 拖 动 var selectedNodes = qataView.getSelectedqNodqes () ; 
一 var dragDropEl = dqocument .createElement ('div'); 
手势 元 素 创建 \ 返 回 拖 
if (selectedNodes.length < 1) { 动 数据 对 象 
selectedNodes.push(sourceEl); 


} 


Ext .each (selectedNodes, function(node) { 
dragDropEl .appendChild(node.cloneNode (true)); 
轮 询 selectedNodes 


3 


列表 
return { 
ddel : dragDropE!l, 
repairxY : Ext.fly(sourceEl) .getxY(), 
dragRecords : dataView.getSelectionModel () 


.getSelection(), 
sourceDataView : dataView 


} 
i function() { 
return this.dragData.repairxY; 

J | 

代码 清单 12-12 创 建 了 覆盖 的 属性 和 方法 给 即将 要 写 的 Dragzone 实 例 使 用 。 虽然 代码 总 量 相 
对 较 少 ， 但 是 有 很 多 逻辑 要 搞 清 楚 。 下 面 看 看 它们 是 如 何 工作 的 。 

一 开始 创建 两 个 配置 属性 ， 用 来 在 拖 动 操 作 过 程 中 控制 深 动 。 第 一 个 是 containerscroll 
@@, 它 被 设置 为 Lrue。, 设 置 这 个 属性 为 Lrue 之 后 ， Dragzone 就 会 调用 Ext .dd.scrollManager. 
register, 来 帮助 控制 Dataview 的 深 动 操作 。 你 可 以 在 Dragzone 实 现 之 后 ， 从 Dataview 上 
来 仔细 地 观察 这 一 点 。 

下 一 个 属性 ，scrol1@ 被 设置 成 了 false。 设置 成 false 就 阳 I 上 document .body 在 拖 动 代 
理 被 移出 浏览 器 视 口 的 时 候 滚动 。 在 拖 放 操 作 过 程 中 保持 浏览 器 窗口 锁定 能 够 提升 它 操作 的 有 
效 性 。 

接 下 来 覆盖 了 getDragData 和 ,这 对 于 多 节点 的 拖 放 程序 来 说 是 至 关 重 要 的 getDragData 
的 目的 是 创建 一 个 拖 动 数据 对 象 ， 你 可 以 看 到 它 会 在 方法 结束 时 返回 了 。 有 一 点 很 重要 ， 
getDragDat de bi ,可 以 通过 this . dragData 
引用 来 访问 它 。 你 可 以 在 后 面 的 getRepairxY 方 法 中 看 到 这 一 点 。 

在 这 个 方法 中 首先 要 创建 一 个 引用 ， 指 向 @ 拖 动手 势 初 始 化 成 sourceE1 的 那个 元 素 ， 之 后 
当 DataView 认 为 被 选中 节点 的 数量 不 正确 时 ,要 用 这 个 引用 来 更 新 StatusProxy。 你 还 需要 创 
建 一 个 容器 dragDropEl， 用 来 在 拖 动 过 程 中 存放 选中 节点 的 副本 。 这 个 容器 会 被 放 在 


statusProxy 中 o 
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注意 为 了 接 下 来 方法 的 流程 能 继续 ， 需 要 判断 sourceE1 是 否 存 在 。 当 注册 了 DragZzone 上 的 
元 素 触发 鼠标 点 下 事件 时 ，getDragData 就 会 被 调用 。 这 就 意味 着 getDragData 甚 至 会 
在 View 元 素 自身 被 点 击 之 后 被 调用 ， 而 不 单单 是 其 中 的 一 条 记录 元 素 ， 这 会 导致 方法 调 
用 失败 。 





接 下 来 需要 查看 一 下 view 认 为 有 几 个 元 素 在 拖 动 动作 中 被 选中 了 。 如 果 selectedNodes@ 
的 数量 少 于 1， 就 把 拖 动 动作 开始 的 那个 元 素 放 进 去 。 这 么 做 是 因为 有 时 候 拖 动手 势 会 在 View 能 
够 注册 一 个 选中 的 元 素 之 前 被 初始 化 。 这 是 对 这 个 奇怪 的 行为 的 快速 修补 。 

然后 可 以 使 用 Ext .each@ 方 法 来 轮 询 selectedNodes 链 表 , 并 把 它 加 入 到 aragDropE1 上 。 
这 会 帮助 定制 statusproxy， 并 让 用 户 感觉 是 在 拖 动 一 个 或 多 个 选中 的 节点 的 副本 。 

在 这 段 覆盖 方法 的 最 后 ， 返 回 一 个 用 来 更 新 StatusProxy 以 及 任意 放置 操作 的 对 象 。 仅 仅 
有 一 个 agel 属 性 需要 被 传人 这 个 对 象 ， 它 会 被 放 到 statusProxy 里 面 。 

这 上段 开发 中 添加 了 几 个 其 他 属性 用 来 定制 拖 动 数据 对 象 。 第 一 个 是 repairxY， 它 是 存放 拖 
动手 势 初始 化 的 时 候 元 素 的 X、7Y 举 标的 数组 。 这 会 在 后 面 的 放置 修复 操作 中 被 用 到 。 

还 有 dragRecords， 它 包含 了 每 一 个 被 选择 和 拖 动 的 元 素 的 Ext .data.Recorgd 的 实例 列 
表 。 最 后 把 sourceDataView 设 置 为 DataView 的 引用 ， 以 会 DragzZone 使 用 。 dragRecords 和 
sourceDatavView 两 个 属性 都 会 帮助 Dpropzone 从 DatavView 中 删除 被 放置 的 记录 。 

最 后 一 个 覆盖 列表 中 的 方法 是 getRepairXYy, 它 会 返回 一 个 本 地 缓存 数据 对 象 的 repairxY 
属性 ， 并 帮助 修复 操作 在 无 效 放 入 发 生 时 知道 在 哪里 模拟 statusProxy。 

现在 已 经 设置 了 覆盖 方法 ， 是 时 候 实例 化 一 个 Dragzone 实 例 并 把 它 应 用 到 视图 上 了 ， 如 下 
面 的 代码 清单 所 示 。 


代码 清单 12-13 ”在 视图 上 应 用 Dragzone 


var inOfficeDragZoneCfg = Ext.apply({}, { 
ddGroup : 'employeeDD', < 定制 aragzoneoverrides 


dataView : inofficeDV 的 副本 
}, dragZoneOverrides); 






















































































new Ext.dd.DragZone (inOfficeDv.getEl(), inOfficeDragZoneCfg); 


Var vacationDragZoneCfg = Ext.apply({}, { 
ddGroup : 'employeeDD', 
dataView : onVacationDv 

}, dragZoneOverrides); 


new Ext.dd.DragZone (onVacationDv.getEl1(), vacationDragZoneCfg); 


在 代码 清单 12-13 中 ， 用 Ext. apply 创 建 了 一 个 aragzoneoverriaqes 的 定制 化 副本 对 象 作为 
办 公 室 View@ 中 定制 的 Dragzone。 这 个 覆盖 过 的 定制 的 副本 会 包含 ddGroup 属 性 。 两 个 
Dragzone 的 实现 都 会 共用 这 个 属性 。gqataview 属 性 会 使 得 这 两 个 副本 特别 起 来 , 它 会 用 前 面 写 
好 的 getDragData 来 引用 Dragzone 附 带 的 Dataview。 同 样 的 方式 可 以 用 在 休假 Dataview 的 
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Dragzone 上。 
你 可 能 注意 到 了 ， 和 DDTarget 实 现 不 同 ， 不 需要 把 overrides 对 象 应 用 到 Dragzone 的 实 
例 上 。 这 是 因为 Dragzone 的 超 类 DragsSource 会 自动 地 做 这 件 事 ， 正 如 Ext .Components 那 样 。 
刷新 一 下 页 面 ， 现 在 可 以 使 用 拖 动 操 作 了 。 你 还 能 看 到 定制 好 的 statusProxy 发 生 作用 。 
如 图 12-15 所 示 。 

















As 








Employees in office Employees on vacation 
Acevedo, Hillary 和 
Department: @ 
:hillary.acevedo@mycompany.com 
Email:hillary.acevedo@mycompany.com i 
Acevedo, Kimberl Department: > 
Department: Email:hillary.acevedo@mycompany.com 
:ki ey. @mycomo 1 
Email:kimberley.acevedo @mycom Co Acevedo, Kimberley 
A edo, Ston Ee @mycompany.com 
Department: Kimberley.acevedo@mycompany.com 


Email:stone.acevedo@mycompany.com 





Acevedo, Venus 
Department: 
Email:venus.acevedo@mycompany,com 


Acosta, Cadman 
Department: 
Email:cadman.acosta@mycompany.com 


Acosta, Joan 
Department: 

















图 12-15 带 有 定制 化 了 的 DragProxy 的 DragZone 


可 以 看 到 ,i 选择 并 拖 动 一 个 或 多 个 办 公 \ 室 View 的 Recorgd 会 把 StatusProxy 上 的 选中 的 节点 
的 副本 显现 出 来 ， 这 使 得 拖 动 操作 更 加 漂亮 ， 用 起 来 也 更 有 趣 。 

放置 一 个 拖 动 代理 到 页 面 上 任何 地 方 的 时 候 ，getRepairxY 方 法 都 会 起 作用 。 这 个 动画 的 
效果 会 把 拖 动 代理 滑 向 拖 动 操 作 初 始 的 敌 了 坐标 处 。 

当 试 图 拖 动 节 点 到 休假 View 上 时 ， StatusProxy 显 示 一 个 图 标 说 明 放 人 操作 不 能 成 功 。 这 
是 因为 还 没有 启用 Dropzone， 这 正 是 我 们 接 下 来 的 任务 。 


12.5.3 ”使 用 放 入 


正如 前 面 做 的 拖 放 应 用 , 这 里 必须 注册 一 个 放 入 目标 来 和 拖 动 类 交互 。 前 面 提 到 过 ,你 将 会 
用 到 Dropzone 类 。 遵循 着 这 个 方式 , 下面 的 代码 清单 创建 了 一 个 覆盖 对 象 , 它 会 处 理 放 置 手势 ， 
而 且 比 拖 动 手势 容易 不 少 。 


代码 清单 12-14 ”创建 Dropzone 禾 羡 方 法 


Var dropZoneOverrides = { 


onContainerOver : function() { 
return this.dropAllowed; 更 新 statusProxy 
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onContainerDrop : function(dropZone, evtObj, dragData) { 
var dragRecords = dragData.dragRecords; 
var store = this.dataView.store; 
Var dupFound = false; 


Ext .each (dragRecords, function(record) { 
var found = store.findBy (function(r) { 3 搜索 重复 记录 
return r.data.id === record.data.id; i 


JU 
if (found > -1 ) { 
dupFound = true; 


} 


}); | 移 除 所 有 记录 

if (dupFound !== true) { 
Ext .each (dragRecords, function(record) { 

dragData.sourceDataView.store.remove (record): 

1 9 添加 记录 到 目标 位 置 
this.dqatavView.store.add(dqragRecords ) 
this.dataView.store.sort('lastname', 'ASC'); 

2 0 按 姓氏 给 记录 排序 

return true; 

' 6 提示 放 入 成 功 


} 。 


代码 清单 12-14 创 建 了 一 个 有 两 个 方法 的 override 对 象 , 它 使 得 放 人 手势 可 以 在 两 个 视图 中 
成 功 发 生 。 第 一 个 方法 是 oncontainerover@, 它 用 来 检测 放 入 操作 是 否 被 允许 。 在 这 个 应 用 
程序 中 没有 什么 需要 人 处理 的 , 但 是 你 至 少 要 返回 this .droppedAllowed3 引 用 ,这 个 引用 指向 了 
CSS 类 x-ad-drop-ok， 这 个 类 提供 了 一 个 绿色 的 核对 标记 。 如 果 想 要 一 个 定制 的 图 标 ， 可 以 在 
这 里 返回 一 个 定制 的 CSS 类 。 

下 一 个 方法 (oncontainerDrop ) 是 用 来 处 理 放 入 节点 的 ， 它 会 在 mouseup 事 件 触 发 的 时 
修 ， 被 Dragzone 实 例 调用 。 记 住 Dragzone 是 不 能 和 不 在 同一 个 拖 放 组 中 的 Dropzone 交 互 的 。 

在 这 个 方法 中 ， 会 用 到 有 履 盖 过 的 Dragzone 上 的 getDragData 创 建 的 aragData 对 象 。 一 
个 选中 记录 ( dragRecorgds ) 的 本 地 引用 和 目标 视图 的 存储 (store ) 被 创建 用 在 后 续 的 代 
人 码 上 。 

接 下 来 , onCcontainerDrop 方 法 搜寻 重复 的 Record@@。 如 果 是 在 尝试 复制 而 不 是 移动 操作 ， 
这 很 有 用 。 如 果 没 有 重复 项 ，Ext .each 会 在 Records 上 做 循环 操作 ， 并 把 它们 从 source- 
DataView 存 储 中 移 除 全 。 人 然后 这 些 记录 会 被 添加 @ 到 目标 视图 的 存储 上 ， 并 且 按 照 姓氏 升序 排 
列 @ 起 来 。 

在 所 有 Record 操 作 完 成 之 后 ，onContainerDrop 方 法 会 返回 一 个 布尔 值 true。 通 过 返回 
true， 告 诉 Dragzone 放 入 操作 成 功 了 @， 它 也 就 不 会 触发 修复 动画 了 。 任何 其 他 的 值 都 意味 着 
放 入 操作 不 成 功 ， 修 复 操作 会 发 生 。 

现在 覆盖 对 象 已 经 有 了 ， 是 时 候 把 它们 应 用 到 视图 上 了 ， 如 下 面 的 代码 清单 所 示 。 


代码 清单 12-15 ”创建 Dropzone 履 羡 对 象 


Var inOfficeDropZoneCfg = Ext.apply({}, { 
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ddGroup : 'employeeDD', 
dataView : inofficeDV 
}, dropZoneOverrides); 


new Ext.dd.DropZone (inOfficeDv.ownerCt.el, inOfficeDropZoneCfg); 


Var onVacationDropZoneCfg = Ext.apply({}, { 
ddGroup : 'employeeDD', 
dataView : onVacationDv 
}, dropZoneOverrides); 
new Ext.dd.DropZone (onVacationDv.ownerCt.el, onVacationDropZoneCfg); 


代码 清单 12-15 给 每 个 视图 分 别 创建 了 一 个 dropZzoneoverrides 的 定制 副本 对 象 ， 以 用 作 
DropZzone 的 实现 。 这 和 代码 清单 12-13 中 创建 Dbragzone 实 例 所 用 的 方式 是 一 样 的 。 

现在 可 以 看 到 ， 端 到 端的 拖 放 应 用 程序 可 以 工作 了 。 刷 新 页 面 ,， 并 尝试 从 办 公 室 数据 视图 上 
拖 动 元 素 到 休假 数据 视图 上 ， 如 图 12-16 所 示 。 














Employees in office Employees on vacation 
Acevedo, Hillary 
Department: 
Email:hillary.acevedo @mycompany.com A 
Acevedo, Kimberley 
Department: Acevedo, Hillary 
Email:kimberley.acevedo@myconm, vcom Department: 

Email:hillary.acevedo@mycompany.com 

Acevedo, Stone 
Department: Acevedo, Kimberley 
Email:stone,acevedo@mycompany,com Department: 


Email:imberiey.acevedo@mycompany.com 





Acevedo, Venus 
Department: 
Email:venus.acevedo@mycompany.com 








Acosta, Cadman 
Department: 
Email:cadman.acosta@mycompany.com 





Acosta, Joan 
Department: 


图 12-16 ”statusProxy 现 在 显示 可 以 在 放 入 区 域 执行 放 入 操作 


从 雇员 视图 拖 动 节点 到 休假 视图 上 会 产生 一 个 StatusProxy， 它 包含 了 一 个 绿色 的 检查 标 
记 , 来 作为 放 和 人 引导 。 放 人 节点 的 时 候 会 触发 oncontainerDrop 方 法 。 如 图 12-17 所 示 , 把 Record 
从 左边 移动 到 了 右边 。 

就 是 这 样 ， 用 一 个 漂亮 的 StatusProxy 来 从 一 个 视图 拖 放 元 素 到 男 外 一 个 视图 。 因 为 每 一 
个 视图 都 有 各 自 附带 的 Dragzone 和 Dropzone 的 实例 ， 你 可 以 把 元 素 从 一 个 拖 放 到 另外 一 个 上 ， 
Recozrd 则 会 被 自动 地 按照 名 字 来 排列 。 

你 已 经 知道 如 何 应 用 拖 放 到 两 个 视图 上 了 , 并 且 也 知道 自己 要 负责 写 两 种 手势 的 全 部 端 到 端 
的 代码 。 接 下 来 ,我 们 进入 网 格 面板 的 拖 放 世 界 , 在 那里 你 会 学 到 一 些 和 视图 上 拖 放 不 一 样 的 实 
现 方式 。 这 里 会 使 用 Ext JS 4 提供 的 拖 放 插件 。 
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Employees in office Employees on vacation 
Acevedo, Stone Acevedo, Hillary 
Department: Department: 
Email:stone.acevedo@mycompany.com Email:hillary.acevedo@mycompany.com 
Acevedo, Venus Acevedo, Kimberley 
Department: Department: 
Email:venus.acevedo@mycompany.com Ea [De 





Acosta, Cadman 
Department: 
Email:cadman.acosta@mycompany.com 


Acosta, Joan 
Department: 
Email:joan.acosta@mycompany.com 


Acosta, Lydia 
Department: 
Email:lydia.acosta@mycompany.com 











Department: 


图 12-17 你 成 功 地 从 左边 视图 拖 动 了 两 条 Record 到 右边 了 





12.6 ”网 格 面板 的 拖 放 


假设 要 写 个 程序 , 让 经 理 用 来 了 解 哪些 部 门 需 
的 部 门 ， 并 能 够 调整 要 升级 电脑 的 部 门 的 顺序 。 
完成 这 一 工作 需要 创建 两 个 并 排 的 网 格 面板 ， 
用 在 网 格 之 间 ， 并 允许 重 排列 表 中 的 部 门 。 
在 这 个 练习 中 ， 你 会 发 现在 网 格 上 实现 拖 
Ext .grid.plugin. DragDrop 来 构建 一 个 特殊 的 ] 














要 升级 电脑 。 他 们 希望 能 够 标记 需要 升级 电脑 


正如 前 面 对 视 图 做 过 的 那样 。 你 需要 把 拖 放 应 


放 功 能 相 比 在 视 岁 上 来 得 容易 。 你 会 用 到 
Ext .dd.Dragzone 来 和 网 格 面板 一 起 工作 。 





首先 需要 构建 两 个 放 在 窗 体 中 的 网 格 面板 。 窗 体会 通过 HBoxLayout 布 局 来 安排 网 格 面 板 的 


布局 。 
构建 网 格 面板 


现在 你 应 该 能 够 轻松 创建 网 格 面板 并 配置 它们 的 支持 类 了 。 下 面 的 代码 清单 会 创建 第 一 个 给 





这 个 示例 用 的 网 格 面板 。 
代码 清单 12-16 ”创建 第 一 个 网 格 面板 


Ext.define('PCStats', { 
extend: 'Ext.data.Model', 
fields: [ 
{ name: 'department', type: 'str 
{ name: 'workstationCount', type 





Lnog "yy 
tr 
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学 
创建 远程 JSON 存 储 
Var remoteJsonStore = { 


xtype ee OTE 
model "PCSotaGss 
autoLoad : true, 
proxy : { 
type : 'jsonp', 
Url : 'http://extjsinaction.com/getPCStats.php', 
reader : { 
type : 'json', 
root : 'records' 


} 


Var depsComputersOK = Ext.create('Ext.grid.Panel', { 


title : 'Departments with good computers', -2 实例 化 第 一 个 网 格 面板 


store : remoteJsonStore， 
multiSelect : true, 
viewConfig : { 
plugins : { 
ptype : 'gridviewdragdrop' 


header : 'Department Name', 
dataIndex : 'department', 
flex pi 


header CS; 
dataIndex : 'workstationCount', 
width 0 


这 

代码 清单 12-16 用 JsonP 代 理 创建 了 一 个 远程 存储 @。 接 下 来 ， 实 例 化 了 一 个 网 格 面板 人 @， 它 
会 用 存储 来 呈现 各 个 部 门 。 

接 下 来 的 代码 清单 会 创建 第 二 个 网 格 面板 ， 它 用 来 列 出 需要 升级 电脑 的 部 门 。 


代码 清单 12-17 创建 第 二 个 网 格 面板 


var needUpgradeStore = { 
EVD ISO 配置 本 地 存储 
model : 'PCStats' 











Db 


var needUpgradeGrid = Ext.create('Ext.grid.GridPanel', { 

title : 'Departments that need upgrades', 
store : needUpgradestore, 配置 第 二 个 
multiSelect : true, 网 格 面板 
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viewConfig 时 
plugins: { 
ptype: 'gridviewdragdrop' 
) a 
}, 配置 gridviewdragdrop 
columns ca 插件 
{ 
header : 'Department Name', 
dataIndex : 'department', 
flex 全 法 
} 
{ 
header ;tH PCS 
dataIndex : 'workstationCount', 
width 0 


] 
}); 


代码 清单 12-17 用 Pcstats 模 型 配置 了 一 个 本 地 存储 @， 人 然后 给 需要 升级 的 部 门 创建 了 第 二 
个 网 格 面板 @@， 最 后 配置 了 gridviewdragdrop 插 件 合 。 
这 些 网 格 面板 需要 一 个 “家 ”。 下 面 的 代码 清单 展示 了 如 何 创建 一 个 用 来 放置 它们 的 




















Ext .Windowo 


代码 清单 12-18 


new Ext.Window(t{ 


给 网 格 面板 创建 一 个 “ 


width 005 
height 005 
border : false, 
defaults : { 
frame : true, 
flex :1 
> 
layout : { 
type : 'hbox', 
align : 'stretch' 
La 
items 和 由 
depsComputersOrKk, 
needUpgradeGrid 
] 
}) .show(); 





代码 清单 12-18 创 建 了 一 个 ] 





两 个 网 格 面板 。 是 时 





Ext .Window， 它 用 HBoxLavout 布 局 来 管理 





修 把 面板 拿 出 来 测试 一 下 了 ( 结 





果 如 图 12-18 所 示 )。 
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Departments with good computers 


Department Name 
Accounting 
Advertising 

Asset Management 
Customer Relations 
Customer Service 
Finances 

Human Resources 
Legal Department 
Media Relations 
Payroll 


WP PPS 


#PCs 


114 
151 
106 


< 了 


图 12-18 ”两 个 


Departments that need upgrades 


Department Name #PCs 











排 的 部 门 网 格 面板 





如 果 从 左边 的 网 格 中 选择 一 个 元 素 并 拖 放 到 右边 的 网 格 中 , 你 会 看 到 如 图 12-19 所 示 的 结果 。 


Departments with good computers 


Department Name 
Accounting 
Advertising 

Asset Management 
Customer Relations 
Customer Service 
Finances 

Human Resources 
Legal Department 
Media Relations 
Payroll 


obohs a ahah an 


当 在 左边 的 网 格 面板 上 尝 





数 。 


听 上 去 似曾相识 ? 


图 12-19 


x 
Departments that need upgrades 
Department Name 
» 


1 selected row 


网 格 面板 上 允许 拖 动手 势 


试 拖 动 手势 的 时 候 ， 可 以 看 到 statusProxy 会 显示 被 选中 的 行 


这 就 是 sriaDragzone 类 使 用 getDragData 的 方式 ， 它 会 显示 拖 动 数据 对 
这 里 用 agridqviewDragdqrop 搬 件 走 了 一 个 捷径 
， 你 会 发 现 它 用 了 和 前 面 一 样 的 框架 来 拖 放 操 作 。 这 很 简单 ， 不 是 吗 ? 其 实 树 形 面板 


你 可 以 以 同样 的 方式 来 使 用 它 ， 


现 拖 放 功能 。 


象 的 aael 属 性 的 
径 ， 如 果 深 入 研究 一 下 代 
也 有 同 
但 是 让 我 们 不 用 插件 来 研究 下 如 何在 树 形 面 板 上 实 
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12.7 树 形 面板 上 的 拖 放 


现在 , 公司 收购 了 另外 一 家 公司 , 管理 层 需要 一 个 方式 来 跟踪 如 何 从 收购 的 公司 的 多 个 不 同 
部 门 吸收 和 雇员。 他们 要 你 来 开发 这 样 一 个 程序 , 让 他 们 可 以 用 树 形 面板 和 拖 放 来 跟踪 雇员 的 重新 
分 配 。 

这 里 最 终 的 需求 是 能 够 允许 把 同事 重新 安排 到 一 个 相似 的 部 门 的 特殊 组 织 下 。 比 如 说 , 任何 
来 自 审 计 、 财 务 或 者 薪资 管理 部 门 的 同事 可 以 被 重新 安排 到 任意 这 些 部 门 之 中 。 同 理 , 来 自 客 户 
关系 、 媒 体 关系 、 客 户 服务 和 公共 关系 部 门 的 同事 则 可 以 被 重新 安排 到 这 其 中 的 任意 部 门 。 不 像 
在 JavaScript 中 那样 需要 创建 一 个 有 效 放置 矩阵 ,这 里 每 一 个 元 素 都 会 从 服务 器 上 拿 一 个 返回 的 节 
点 列表 作为 有 效 部 门 。 你 需要 选择 一 个 可 以 满足 需求 的 数据 。 

为 了 大 致 了 解 如 何 使 用 这 些 约束 ， 我 们 一 起 看 下 给 树 形 面板 使 用 的 雇员 记录 : 


{ 




































































"text": "Kemp, Sawyer", 
"leaf": true, 
"validDropPoints": [ 
"Accounting", 
"Finances", 
"Payroll" 
] 
} 
深入 研究 放 入 操作 的 实现 逻辑 时 ， 会 使 用 valigqDropPoints 数 组 来 驱动 图 形 界面 的 决策 过 程 。 
对 于 这 条 记录 ， 这 个 雇员 仪 可 以 被 移动 到 审计 、 财 务 或 者 薪资 管理 部 门 。 
好 了 ， 让 我 们 开始 构建 一 个 树 形 面板 吧 。 之 后 ， 需 要 添加 一 些 拖 放 功 能 。 


12.7.1 构建 树 形 面 板 


正如 前 面 视 图 和 网 格 面板 的 例子 一 样 ， 这 里 需要 构建 两 个 树 形 面板 ， 它 们 都 会 被 一 个 
Ext .Window 的 实例 用 HBoxLayout 布 局 管理 起 来 。 
因为 已 经 写 过 几 个 树 形 面板 了 ， 我 们 打算 在 这 里 只 做 简单 介绍 ， 如 下 面 的 代码 清单 所 示 。 


代码 清单 12-19 ”为 树 形 面板 上 的 拖 放 做 准备 




















var leftTree = Ext.create('Ext.tree.Panel', { 
autoScrol1 : true, 他 们 公司 的 面板 
title : 'Their Company', 
animate : false, 
store : Ext.create('Ext.data.TreeStore', { 
SEOR 
type : 'jsonp', 
记 芒 二 : 'http://extjsinaction.com/theirCompany .php', 


reader : { 
root : 'records' 


} 
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Root : { 
text : 'Their Company', 
iqd : 'theirCompany', 
expanded : true 
} 
} 
过 
隐 你 公司 的 面板 
Var rightTree = Ext.create('Ext.tree.Panel', { 
title : 'Our Company', 
autoScroll : true, 
animate : false, 
store : Ext.create('Ext.data.TreeStore', { 
Drowy 二 
type OND 
na : 'http://extjsinaction.com/ourCompany .php', 
reader : { 
root : 'records' 
: 
hh 
root : { 
text : 'Our Company '， 


expanded : true 


}) 
3 


// 抑 放 代码 


2 包含 树 形 面板 的 窗口 
Ext .create('ExXL.Windqaow'，({ 
Height :50 
width i -50 
border : false, 
layout pA 
Javont.t. -DOxNwr; 
align : 'stretch' 


Pa 

defaults : { 
芷 二 合演 se 汪 

items 入 站 
leftTree, 
rightTree 


] 
}) .show(); 


在 代码 清单 12-19 中 ,创建 了 两 个 视图 面板 和 一 个 用 来 容纳 并 用 HBoxLayout 布 局 它们 的 
Ext .Window。 左 边 的 树 形 面板 @ 会 加 载 其 他 公司 的 部 门 列表 。 每 一 个 部 门 都 要 能 够 被 展开 ， 以 
显示 子 节点 。 

右边 的 树 形 面 板 伟 则 会 加 载 本 公司 的 雇员 列表 ,幸运 的 是 ,它们 和 被 卖 的 公司 部 门 是 一 致 的 。 
简单 起 见 ， 我 们 不 想 展示 公司 现 有 的 雇员 了 。 
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最 后 , 创建 Ext .window@@ 来 管理 两 个 并 列 的 树 形 面板 。 图 12-20 展 示 了 树 形 面板 在 屏幕 上 的 
样子 。 














Xx 
Their Company Our Company 
BS Their Company 日 局 Our Company 
J Accounting 由 加] Accounting 
于 Kemp, Sawyer DD Advertising 
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司 Marinez Armando 由 癌 ] Human Resources 
司 Mcgowan, Breanna 四 加 Legal Department 
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于 Brewer Winter 由 局 ] Payroll 
司 Watkins, Sarah BB DD Public Relations 
司 Barton, Tanisha BD Quality Assurance 
司 William, Kieran BD Research and Development 
| Rriaht, Sybill HI lSalesand Marketina 





图 12-20 ”两 个 树 形 面板 
现在 已 经 有 了 两 个 泻 染 在 Ext .Window 上 的 树 形 面板 ， 是 时 候 来 关注 一 下 拖 放 了 。 


12.7.2 启用 拖 放 


当 探 索 如 何在 数据 视图 上 使 用 拖 放 时 , 需要 实现 Dragzone 和 Dropzone 两 个 类 。 当 特性 在 网 
格 面板 上 实现 的 时 候 仅仅 需要 实现 Dropzone， 因 为 如 果 网 格 面板 设置 了 enableDragDrop 属 性 
的 时 候 网 格 视图 已 经 自 动 地 创建 了 GridaqDragzone 6 

对 树 形 面板 来 说 , 可 以 通过 启用 ViewDragDrop 捕 件 轻松 地 获得 拖 放 功 能 。 通 过 添加 如 下 的 配 
置 属性 到 树 形 面板 上 即 可 : 


viewConfig : { 
plugins : { ptype : 'treeviewdragdrop' } 
































} 
通过 这 种 方式 启用 拖 放 功能 ， 树 形 面板 上 的 拖 放 操作 变 简 单 了 。 每 一 样 东西 都 可 以 被 拖 放 ， 
这 对 于 文件 系统 管理 工具 等 非常 实用 , 但 是 对 于 你 的 需求 ,基本 的 拖 放 实现 就 无 法 胜任 了 。 给 现 
成 的 拖 放 插件 添加 约束 变 得 非常 困难 。 

为 了 能 够 应 用 约束 ， 你 将 要 实现 自己 的 ViewDragzone 和 ViewDropzone 类 的 实例 。 接 下 来 
我 们 解决 这 一 难题 ， 准 备 好 了 吗 ? 


12.7.3 采用 灵活 的 约束 
把 解决 这 一 问题 分 成 两 个 阶段 : 启用 在 左边 树 形 面板 的 拖 动 操作 , 然后 启用 右边 树 形 面板 的 
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0 在 左边 的 树 形 面板 上 启用 拖 动 操 作 是 两 者 中 最 简单 的 , 接 下 来 的 代码 清单 中 会 展示 这 
一 点 。 下 面 的 代码 会 被 放 到 在 代码 清单 12-19 中 你 创建 Window 实 例 之 前 。 


代码 清单 12-20 ”应 用 更 好 的 放 入 约束 


leftTree.getView() .on('render', ee (view) 
Ext .create('Ext.tree.ViewDragZone' 
] 中 j 兴 1IOF 蚜 
Wy es ws 创建 ViewDragzone 添加 泻 染 监听 器 
dragText : "Schedule vacation' 
ddGroup : 'myTreeDDGroup' 
onBeforeDrag : ne tor { 
return view.getNode (dragData.item) .attributes.leaf; 
a 
a 仅 在 叶子 节点 上 启用 拖 动 功能 


}); 


为 了 启用 拖 动 , 需要 在 左边 的 树 形 视 图 类 上 注册 一 个 演 染 监听 器 @。 这 个 监听 器 负责 创建 一 
个 ViewDragzone 的 实例 @。 这 个 ViewDragzone 类 需要 一 些 基 本 的 非常 明了 的 配置 参数 ， 我 想 
在 这 儿 提 一 下 onBeforeDrag 也 数 合 。 

在 此 方式 下 ， 你 需要 实现 自己 的 onBeforeDrag 函 数 ， 如 果 被 拖 动 到 元 素 有 叶 属 性 为 Lrue， 
则 函数 必须 返回 为 crue。 这 样 的 效果 是 拖 动 操 作 仅 可 以 被 应 用 在 叶子 节点 (雇员) 上 ， 而 不 能 
是 分 支 节点 (部门 ) 上 。 

拖 动 操 作 完 成 并 绑 定 之 后 便 可 以 在 右边 的 树 形 面板 上 实现 放 和 人 操作 了 。 需要 把 如 下 的 代码 清 
单 放 到 代码 清单 12-20 的 代码 之 后 。 


代码 清单 12-21 ”应 用 更 好 的 放 入 约束 











到 [ 




















rightTree.getView() .on('render', function(view) { 
Ext .create('Ext.tree.ViewDropZone', { 
添加 View : View, 0 创建 ViewDropzone 
泻 染 ddGroup : 'myTreeDDGroup', 
监听 器 isValidDropPoint : function(node, pos, dz, e, data) { 
var dropNode = Vview.getRecord (data.item), 覆盖 isvaliapropPoint 
targetNode = view.getRecord (node), 
dragNode = data.records[0], 
validDropPoints, 
targetNodeText; 
if (! dropNode || !targetNode) { 


return false; 


} 


if (targetNode.raw.leaf) { 
return false; 


} 


if (pos != 'append') { 
return false; 


} 
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validDropPoints = dragNode.raw.validDropPoints; 
targetNodeText = targetNode.get ("text"),; 


return Ext.Array.contains (validDropPoints, targetNodeText); 


i Re 
本 添加 一 次 验证 测试 


代码 清单 12-21 包 含 了 确保 放 和 人 操作 仅仅 会 发 生 在 相关 联 的 分 支 节 点 上 的 所 有 代码 。 为 了 能 
在 正确 的 时 间 创 建 viewDropzone， 需 要 在 右边 的 树 形 View 类 上 注册 一 个 演 染 事件 监听 器 @。 

这 个 事件 监听 器 唯一 的 功能 是 创建 ViewDropzone 类 的 实例 @。 为 了 添加 合适 的 放置 约束 ， 
需要 履 盖 isvalidDropPoint 方 法 合 。 

在 这 个 方法 中 , 你 从 前 面 的 词汇 范围 引用 中 收集 一 些 数据 。 然 后 会 有 一 些 if 判 断 ， 如 果 在 遇 
到 满足 约束 条 件 的 情形 下 就 会 返回 false; 如 果 没 有 约束 被 满足 ,就 会 返回 LargetNodeText 是 否 
包含 在 valigDropPoints 数 组 中 的 验证 结果 人 @。 其 中 的 约束 包括 试图 放 入 到 : 
口 非 树 形 视图 上 的 节点 ; 
口 树 形 视 图 上 叶子 节点 ; 
口 没有 给 位 置 (pos ) appengd 属 性 的 节点 。 

假设 放置 操作 通过 了 所 有 这 些 验证 ， 然 后 返回 了 调用 Ext .Array .contains 方 法 的 结果 ， 
你 可 以 通过 它 看 到 targetNogde( 放 入 目标 ) 的 名 称 是 否 匹 配 放 入 节点 ( 拖 动 节点 ) valigdDrop 
Points 数 组 。 如 果 匹 配 ， 就 允许 放置 ， 如 图 12-21 所 示 。 
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标 约束 的 逻辑 


图 12-21 检测 放 入 
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你 可 以 通过 尝试 拖 动 一 个 部 门 分 支 节点 来 检验 约束 逻辑 , 并 可 以 发 现 那 是 不 可 能 的 , 这 表明 
onBeforeDrag 和 覆盖 方法 如 设计 的 那样 工作 了 。 

要 决定 节点 可 以 被 拖 动 到 哪儿 ， 把 鼠标 悬 停 上 去 ， 就 可 以 看 到 Too1lTip 提 示 框 ,里面 有 从 
validDrobpPoints 数 组 中 定义 的 值 。 当 鼠标 悬 停 到 Erin 上 的 时 候 ， 你 会 发 现 她 可 以 被 放 人 到 会 
计 部 门 而 不 能 是 广告 部 。 当 把 Erin 拖 动 到 右边 树 形 面板 上 的 会 计 部 门 时 ，statusProxy 会 展示 一 
个 有 效 的 放 入 图 标 。 但 是 如 果 是 把 她 停 在 广告 部 门 上 ， 你 就 会 看 到 statusProxy 显 示 一 个 无 效 
的 放 入 图 标 。 此 外 ， 如 果 尝 试 把 Erin 停 到 财务 部 门 和 薪资 管理 部 门 上 ， 你 同样 会 看 到 一 个 有 效 的 
放 入 图 标 。 

最 后 一 个 验证 的 是 把 一 个 或 两 个 同事 放置 到 有 效 的 部 门 上 。 你 还 可 以 测试 是 否 可 以 放 入 叶子 
节点 到 一 个 有 效 部 门 的 其 他 叶子 节点 的 上 面 或 者 下 面 。 

就 是 这 些 了 : 两 个 树 形 面板 之 间 的 拖 放 ， 放置 约束 系统 有 点 复杂 但 是 很 灵活 。 我 相信 你 的 工 
作 表 现 足 以 让 经 理 满意 了 。 













































































12.8 ”小结 


本 章 研究 了 在 三 种 框架 中 最 常用 的 部 件 上 实现 拖 放 的 多 种 方式 。 首 先是 在 DOM 元 素 上 实现 
拖 放 。 本 章 涵盖 了 拖 放 框架 的 基础 知识 ， 然 后 讲 了 一 个 较 复杂 的 基于 视图 的 例子 。 然 后 ， 你 探 
究 了 实现 拖 放 的 捷径 ， 如 何在 网 格 面板 上 使 用 插件 。 最 后 讲解 了 如 何在 树 形 面板 上 实现 拖 放 。 
在 这 个 实现 中 可 以 看 到 ， 在 树 形 面板 上 启用 拖 放 是 很 简单 的 任务 ， 但 是 放置 手势 的 约束 条 件 确 
实 非常 复杂 。 

下 一 章 将 介绍 插件 和 扩展 及 其 工作 原理 。 你 将 通过 JavaScript 使 用 面向 对 象 技 术 , 并 且 获 得 很 
多 乐趣 。 



























































构建 一 个 应 用 


在 这 一 部 分 ， 你 将 了 解 Ext JS 的 工作 方式 ， 并 掌握 一 些 构建 MVC 应 用 的 最 佳 实践 。 

第 13 章 将 关注 原型 继承 、 类 定义 、 子 类 化 组 件 、 框 架 扩展 、 通 用 插件 、 动 态 类 加 载 器 
(包含 复杂 的 带 有 上 下 文 菜单 的 网 格 面 板 ， 而 上 下 文 菜单 可 用 于 各 种 数据 视图 ) ， 借 此 深入 
探讨 用 于 加 强 重用 性 的 类 系统 基础 知识 。 第 14 章 展示 了 如 何 构 建 基 于 MVC 架 构 和 控制 器 的 复 
杂 应 用 ，Ext JS、JavaScript 和 CSS 的 代码 规范 ， 以 及 推荐 的 运用 Sencha 的 命令 行 工 具 的 开发 
过 程 ， 这 涉及 了 贯穿 本 书 的 知识 点 。 

这 一 部 分 使 你 能 够 使 用 框架 的 更 高 级 功能 (比如 定制 的 扩展 、 插 件 ， 以 及 类 加 载 器 ) ， 
并 且 还 会 学 到 构建 和 管理 Web 应 用 的 坚实 理论 。 
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本 章 内 容 

口 理解 原型 继承 

口 开发 第 一 个 扩展 

口 使 用 插件 

口 探究 Ext JS 的 类 加 载 器 





每 个 Ext JS 开发 人 员 都 会 面 对 很 多 挑战 ， 其 中 之 一 便 是 可 重用 性 。 一 般 来 说 ， 一 个 组 件 在 应 
用 的 生命 周期 中 都 会 多 次 出 现 。 如 果 不 掌握 一 些 必要 的 技能 ， 最 终 的 代码 可 能 会 变 成 “函数 汤 ” 
一 一 难以 维护 。 因 此 ， 我 们 需要 关注 如 何 使 用 框架 提供 的 扩展 和 插件 来 实现 可 重用 性 。 
本 章 将 介绍 Ext JS 基本 的 扩展 方法 〈 子 类 化 )。 首先 ， 你 将 学 习 在 JavaScript 中 创建 子 类 ， 然 
后 了 解 如 何 通 过 原生 语言 工具 来 完成 任务 。 这 一 知识 可 为 重 构 新 写 的 子 类 以 使 用 Ext JS 类 系统 打 
下 基础 。 

一 旦 你 能 熟练 地 创建 基本 的 子 类 ， 我 们 就 来 学 习 扩 展 Ext JS 的 组 件 。 你 会 学 习 框 架 扩 展 的 基 
础 知识 ， 然 后 通过 扩展 网 格 面板 部 件 来 解决 一 个 现实 问题 。 

接 下 来 你 会 看 到 , 若 通 过 扩展 来 解决 问题 ， 当 多 个 部 件 需要 用 到 类 似 的 功能 时 会 产生 继承 问 
题 。 一 旦 你 理解 了 扩展 的 基本 限制 ， 就 会 想 把 扩展 转换 成 插件 , 这样 它 的 功能 就 容易 被 网 格 面板 
以 及 其 子 类 共用 了 。 

当 你 扎实 地 掌握 了 Ext JS 类 系统 的 基础 知识 之 后 ， 我 们 一 起 看 下 Ext JS 提供 的 动态 类 加 载 器 。 
我 们 会 探讨 使 用 动态 类 加 载 器 的 三 种 流行 模式 以 及 相应 的 注意 事项 。 注 意 , 我 们 建议 大 家 在 学 习 
过 程 中 下 载 本 章 相应 的 示例 代码 ， 并 在 阅读 时 随时 查看 。 


















































13.1 经 典 的 JavaScript 继承 


JavaScript 提 供 了 原型 继承 的 所 有 可 能 的 工具 ， 但 是 构建 多 重 类 继承 就 显得 不 足 了 。ExtJS 通 
过 类 系统 让 多 重 类 继承 变 得 容易 不 少 。 开 始 学 习 继承 前 ， 你 先 要 创建 一 个 基 类 。 

为 了 帮助 学 习 接 下 来 的 内 容 ， 我 们 假设 你 正在 做 汽车 销售 ， 负 责 出 售 两 种 汽车 。 第 一 种 是 基 
础 车 型 , 它 是 高 价 车 型 的 构建 基础 。 你 将 使 用 JavaScript 类 来 描述 这 两 种 汽车 模型 ， 而 不 是 3D 模 型 。 







































































13.1 经 典 的 JavaScript 继承 291 





注意 ”如果 是 第 一 次 接触 面向 对 象 JavaScript 亦 或 感觉 有 点 生 跤 ，Mozilla 基 金 会 有 一 篇 极 好 的 文 


章 来 提升 强化 这 方面 的 技能 。 你 可 以 访问 http://mng.bz/R9BB 找 到 


13.1.1 创建 一 个 基 类 








ci 
已 。 


Pe 


首先 构建 一 个 描述 基础 车 型 的 类 ， 如 下 面 的 代码 清单 所 示 。 


代码 清单 13-1 构建 一 个 基 类 
Var BaseCar = function(config) { 
this.octaneRequired = 86; 
Els.Si 人 tTO 三 
this.gear = gear; 
于 
this- shriftTo( park .hy 
下 
BaseCar.prototype = { 


engine 正六 

turbo false 
wheels : 'basic', 
getEngine : function() { 


return this.engine; 
2 
drive 2 funetior(} 
console.log("Vrrrrooooooom 
} 
} 四 


this.octaneRedquired 赋 值 ,添加 一 个 this.shiftmTo 方 法 ,并 调用 它 , 把 本 地 属性 this .gear 


赋值 为 'park'。 然后 配置 BaseCar 类 的 pro 
以 及 两 个 方法 。 
使 用 如 下 的 代码 创建 Basecar 的 一 个 实 





Var mySlowCar = new BaseCar(); 
mySlowCar.drive(); 
console.log(mySlowCar.getEngine()); 
console.log('mySlowCar contents:');} 
console.dir (mySlowCar) 


function(gear) { 


代码 清单 13-1 创 建 了 Basecar 的 构造 带 @， 当 实例 化 的 时 候 ， 它 会 给 实例 的 本 地 属性 


0 创建 构造 器 


0 指派 原型 对 象 


= Tm driving! 


i 














totype 对 象 加 , 它 包 含 了 三 个 描述 Basecar 的 属性 ， 


例 ， 并 用 Firebug 来 检查 它 的 内 容 : 


图 13-1 展 示 了 在 Firebug 多 行 编辑 器 和 控制 台 上 的 代码 输出 结果 。 


现在 可 以 关注 Basecar 类 的 子 类 化 了 。 
Ext .define 时 能 够 更 好 地 理解 底层 发 生 的 





首先 以 传统 的 方式 来 进行 。 这 样 一 来 ， 稍 后 使 用 





和 情 。 
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褒 本 Console HTML CSS Script DOM Net YSio 


Clear Persist Profile kar mySlowCar = new BaseCar(); 


Vrrrrooooooom - I'm driving! mySlowCar.drive(); 
I4 console.1log(mySlowCar .getEngine()); 





mySlowCar contents: console.log(C'mySlowCar contents: '); 
engine "I4" console.dir(mySlowCar) 
gear "park" 
octaneRequired 86 
turbo false 
wheels "basic" 
bp drive function() 
pb getEngine function() 
bp shiftTo function() 





图 13-1 实例 化 基础 车 型 的 实例 并 操作 了 它 的 两 种 方法 





13.1.2 ”创建 一 个 子 类 


你 几 步 就 能 用 原生 的 JavaScript 来 创建 一 个 子 类 。 我 们 并 非 仅 仅 描述 每 一 步 怎么 做 , 而 是 会 一 
步 步 地 介绍 实际 操作 。 下 面 的 代码 清单 展示 了 如 何 创 建 Basecatr 的 子 类 Premiumcar。 


代码 清单 13-2 用 老 派 的 方式 创建 一 个 子 类 


var PremiumCar = function() { 
PremiumCar.superclass.constructor.call (this) >» 配置 子 类 构造 


this.octaneRequired = 93; 


超 类 PremiumCar.prototype = new BaseCar() 


构造 器 Frm ar doerelass = BaseCar. Bre © 类 
原型 
设置 子 类 的 








PremiumCar.prototype.turbo = true; 
PremiumCar.prototype.wheels = ee 
PremiumCar.prototype.drive = function( 超 类 引用 
this.shiftTo('drive'); 
PremiumCar.superclass.drive.call (this); 
ee 
PremiumCar.prototype.getEngine = function() { 
return 'Turbo ' + this.engine; 
下 
要 创建 一 个 子 类 ， 首 先 要 创建 一 个 新 的 构造 带 ， 并 把 它 分 配给 引用 Premiumcar@。 这 个 不 
造 器 内 会 调用 Prenia .superClass 的 constructor 方 法 。 i 
PremiumCar@ (this ) 的 。 
之 所 以 要 这 么 做 , 是 因为 JavaScript 与 其 他 的 面向 对 象 语言 不 同 , 它 的 子 类 不 会 原生 地 调用 它 
们 超 类 的 构造 器 。 调 用 超 类 的 构造 器 会 为 其 带 来 一 个 机 会 ,， 即 实施 和 完成 子 类 可 能 需要 的 任何 基 
于 构造 吉 的 特定 功能 。 在 这 个 例子 中 ， sbng 且 半 是 由 Baseear 构 阁 竟 添加 并 调用 的 。 如 果 不 
调用 超 类 的 构造 器 ， 那 就 意味 着 子 类 不 能 获得 基 类 构造 器 提供 的 好 处 了 。 
然后 ,把 Premiumcar 的 prototype 属 性 设置 为 Basecar 合 的 一 个 新 的 实例 。 这 一 步 操 作 使 
得 PremiumCar .prototype 能 够 继承 Basecar 所 有 的 属性 和 方法 。 这 称 作 为 原型 继承 ， 它 是 


JavaScript 中 构建 类 层次 结构 最 为 通用 和 健壮 的 方式 。 
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接 下 来 的 一 行 代 码 把 PremiumCar 的 superclass 引 用 设置 为 BaseCar 类 @ 的 prototype 
值 。 然 后 你 就 可 以 用 这 个 superclass 的 引用 去 做 一 些 事情 了 ， 其 中 有 创建 扩展 方法 ， 比 如 
Premiumcar.prototype.dqrive。 这 个 方法 称 作 扩展 方法 ， 因 为 它 调 用 超 类 的 原型 上 类 似 名 字 





的 方法 ， 但 是 是 从 它 的 子 类 实例 的 作用 域 上 调用 的 。 





提示 所 有 的 JavaScript 函 数 (JavaScript 1.3 及 之 后 版 本 ) 都 有 两 个 方法 强制 作用 域 执行 : call 
和 apply。 要 学 习 call 和 apply， 请 访问 www.webreference.com/js/column26/apply.html。 


有 了 子 类 之 后 就 可 以 通过 如 下 代码 实例 化 一 个 Premiumcar 的 实例 , 并 进入 Firebug 编 辑 器 中 


进行 测试 了 : 
var myFastCar = new PremiumCar(); 
myFastCar.drive(); 
console.log('myFastCar contents:');} 
console.dir (myFastCar); 


图 13-2 展 示 了 Firebug 中 的 输出 。 这 些 输 出 表明 子 类 做 了 你 预期 的 事情 。 从 console .dir 输 
出 中 , 可 以 看 到 子 类 构造 器 把 cctaneRequired 属 性 设置 为 93 , 并 且 drive 扩 展 方法 甚至 把 gear 














方法 设置 为 "drive"。 


了 人 


秦 本 Consolev HIML CSS Script DOM Net  YSlov 
Clear Persist Profile var myFastCar = new PremtumCar(); 
Vrrrrooooooom - I'm driving! myFastCar. driveQ); 





myFastCar contents: 


engine "I4" console.dir(myFastCar); 
gear "drive" 
octaneRequired 93 
turbo true 
wheels "premium" 
b drive functionO 
pb getEngine functionO 
b shiftTo functionO) 


图 13-2 ”运行 中 的 PremiumCar 子 类 





console.log('myFastCar contents:'); 


这 个 练习 表明 了 你 需要 对 使 用 原生 JavaScript 语 言 实现 原型 继承 的 所 有 关键 步骤 负责 。 首 先 
需要 创建 子 类 的 构造 器 ,然后 还 需要 把 子 类 的 原型 设置 成 基 类 的 实例 , 再 然后 要 为 了 方便 设置 一 
下 子 类 的 superclass 引 用 。 最 后 ， 你 需要 一 个 个 地 给 原型 添加 成 员 变 量 。 




















可 以 看 到 , 通过 原生 语言 结构 创建 多 个 类 需要 遵循 很 多 步骤。 幸运 的 是 ,实现 相同 的 结果 有 











更 简单 的 办 法 。 接 下 来 ， 你 将 看 到 Ext JS 类 系统 是 如 何 简化 类 创建 和 多 重 绢 


13.2 ”Ext JS 的 继承 








毕 承 的 。 


ExtJS 的 类 系统 把 JavaScript 的 原型 继承 带 到 了 更 高 的 层次 上 ， 增 加 了 不 少 功能 ， 比 如 依赖 注 
入 、 自 动 创建 获取 方法 和 设置 方法 、 静 态 以 及 掺 入 支持 ( 多 重 继承 )。 所 有 这 些 功能 都 需要 用 一 
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些 稍 后 将 学 到 的 Ext JS 类 方法 ， 比 如 Ext .define、Ext.create 以 及 Ext .require。 通 读本 节 
内 容 ， 你 就 会 知道 为 什么 Ext JS 的 类 系统 是 一 个 很 棒 的 应 用 开发 解决 方案 了 。 


13.2.1 创建 一 个 基 类 


你 已 经 看 到 如 何 实现 JavaScript 原 型 继承 了 ,知道 要 做 到 简单 级 别 的 继承 就 不 得 不 做 相当 多 的 
工作 。 当 碰 到 像 这 些 应 用 一 样 的 复杂 软件 的 时 候 , 你 不 得 不 斋 很 多 的 代码 才能 实现 继承 。 这 意味 
着 项 目 中 会 有 宛 余 代 码 ， 并 导致 代码 膨胀 。 

Ext JS 是 一 个 完美 的 选择 ， 它 可 以 替 你 做 这 些 繁 重 的 工作 。 要 想 知道 为 什么 我 们 这 么 说 ， 请 
回顾 最 初创 建 的 两 个 类 。 代 码 清 单 13-3 展 示 了 开始 用 Ext JS 创建 Basecar 类 时 Basecar 和 
PremiumCar 类 的 样子 。 然 后 通过 扩展 BaseCar 来 创建 PremiumCar 类 。 这 里 通过 合适 的 带 有 命 
名 空间 的 包 名 来 定义 类 名 , 而 不 是 使 用 简单 的 类 名 , 这 一 点 和 一 些 经 典 编程 语言 很 像 ， 比 如 Java。 


代码 清单 13-3 ”使 用 Ext JS 定义 基 类 













































































wheels : 'basic'， 


Ext .define('MyApp.car.BaseCar', { 
engine : 'I4', 9 定义 基本 车 型 类 (Basecar) 
指 


turbo : false, 
旨 定 类 的 基本 类 型 


constructor : function(config) { 
this.octaneRequired = 86; 6 定义 构造 器 


this.shiftTo = function(gear) { 
this.gear = gear; 


hb 


this. shiftTo(Park:)s 
jj 
getEngine : function() { 
return this.engine; 
和 
drive : function() { 
console.log("Vrrrrooooooom - I'm driving!"); 
} 
jt> 
代码 清单 13-3 呈 现 了 Ext .define 最 基本 的 使 用 方式 ， 用 它 定 义 了 Basecar 类 @, 第 一 件 怪 
事 是 定义 类 名 的 方式 : 通过 字符 串 定义 。 这 是 因为 Ext JS 给 了 你 把 类 名 和 命名 空间 定义 在 一 起 的 
机 会 。 如 果 先 前 没有 创建 过 ，Ext JS 会 在 命名 空间 Myapp . car 创 建 它 ， 并 且 还 会 把 Basecazr 类 放 
到 那个 命名 空间 下 。 这 一 模式 给 我 们 这 章 中 将 要 学 习 的 类 加 载 系统 铺 好 了 道路 。 在 那儿 你 会 知道 
根据 命名 空间 在 文件 系统 中 组 织 类 文件 是 多 么 重要 。 
在 定义 类 的 时 候 , 给 类 的 原型 @ 的 基本 类 型 赋值 ,然后 创建 构造 器 全 。 这 个 类 和 在 代码 清单 
13-1 定 义 的 类 有 一 模 一 样 的 行为 ， 不 同 的 是 在 用 Ext JS 的 方式 定义 它 。 
要 实例 化 这 样 的 一 个 类 ， 需 要 用 Ext .create 而 不 是 JavaScript 的 关键 字 new。 现 在 你 已 经 习 
惯 了 使 用 Ext .create 来 使 用 ExtJS 的 类 了 , 但 是 还 要 学 会 把 它 用 在 自己 定义 的 类 上 。 可 以 这 么 做 : 































































































13.2 ”Ext JS 的 继承 295 





Var mySlowCar = Ext.create('MyApp.car.BaseCar'); 
mySlowCar.drive(); 
console.log(mySlowCar.getEngine()); 


图 13-3 展 示 了 结果 。 





:> ~ | Console ~ | HIML CSS Script DOM 


lo Clear Persist Profile All Errors Warnings Info Det 
Vrrrrooooooom - Im driving! 14.3_u..ne.html (line 28) 
I4 14.3_u..ne.html (line 34) 


图 13-3 ”第 一 个 Ext JS 类 的 结果 


如 图 13-3 所 示 ， 你 从 刚刚 实现 的 MyApp .car.Basecar 类 得 到 了 预期 的 结果 。 这 为 通过 
Ext .define 来 扩展 这 个 类 创造 了 完美 的 条 件 。 














13.2.2 ”创建 一 个 子 类 


下 面 这 个 代码 清单 展示 了 如 何 扩展 Basecar : 使 用 Ext.define 方 法 来 创建 超 类 
MyApp .car.Basecar 的 一 个 扩展 (也 就 是 子 类 ): Myapp .car.Premiumcar。 下 面 介绍 它 是 怎 
么 工作 的 。 


代码 清单 13-4 ”使 用 Ext .define 扩 展 BaseCar 





























Ext .define('MyApp.car.PremiumCar', { 
extend : 'MyApp.car.BaseCar', 定义 高 级 车 型 类 
扩展 上 turbo : true, 
基本 We On 8 覆盖 基本 车 型 原始 基本 类 型 
车 型 类 stereo 2 
constructor : function() { 
this.callParent (arguments); So 定义 高 级 车 型 构造 器 
this.octaneRequired = 93; 
和 
getEngine tunetTor(). 
return 'Turbo ' + this.engine; 
}, 
超 类 的 扩展 驱动 方法 
drive : function() { 


this.callParent (); 
this.shiftTo('drive'); 
console.log('The turbo makes a big difference!'); 


上 


首先 调用 Ext .define 来 定义 一 个 Myapp.car.PremiumCcar@ 扩 展 类 ， 把 先前 定义 的 
MyApp .car .BaseCar 作 为 一 个 字符 串 赋 值 给 extend 关 键 字 @ 来 告诉 Ext JS 要 扩展 这 个 类 。 接 下 
来 ,设置 原型 覆盖 ， 把 这 个 类 的 turpo、wheels 和 stereo 属 性 设置 得 和 父 类 不 同 。 
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在 考虑 扩展 类 的 时 候 , 必须 要 考虑 子 类 中 的 原型 方法 是 不 是 要 和 父 类 中 的 原型 方法 共用 方法 
名 。 它 们 是 否 使 用 同样 的 符号 引用 ， 将 决定 它们 是 扩展 方法 还 是 覆盖 方法 。 

扩展 方法 是 子 类 的 方法 , 它 和 父 类 中 的 方法 拥有 同样 的 名 称 。 之 所 以 是 扩展 方法 , 这 是 因为 
事实 上 这 一 方法 内 部 会 执行 父 类 中 的 这 一 方法 。 使 用 扩展 方法 的 原因 是 它 可 以 减少 重复 代码 , 这 
样 就 可 以 重用 父 类 中 的 代码 了 。 

这 个 类 的 构造 器 全 方法 是 一 个 扩展 方法 。 这 和 前 面 创建 的 PremiumCar 构 造 器 @ 是 完全 一 样 
的 ， 需 要 加 上 this.callParent (arguments ) 来 调用 父 类 的 构造 器 @ 方 法 。 这 个 语句 让 子 类 
可 以 获得 构造 需 方 法 的 调用 链 ， 有 效 地 让 超 类 的 构造 器 Myapp.car.Basecar 能 够 在 子 类 
MyApp .car.Premiumcar 实 例 的 作用 域 上 来 执行 。 

履 盖 方法 是 子 类 中 的 方法 ， 它 和 基 类 中 的 另 一 个 方法 共用 同样 的 引用 名 称 ， 但 是 它 不 会 用 
this.callParent () 来 链 式 地 调用 超 类 中 的 方法 。 如 果 希 望 舍弃 基 类 中 同名 的 代码 ， 可 以 覆盖 
一 个 方法 。 因 此 ， 不 需要 在 履 盖 方法 内 调用 this .callParent () 方 法 。 

现在 已 经 用 Ext .define 配 置 了 PremiumCar 类 ， 可 以 用 Firebug 来 看 看 效果 了 。 可 以 重用 测 
试 手动 创建 的 子 类 的 代码 来 做 测试 。 

var myFastCar = Ext.create('MyApp.car.PremiumCar'); 


myFastCar.drive(); 
console.log(myFastCar.getEngine()); 


图 13-4 展 现 了 输出 在 Firebug 控 制 台 的 样子 。 




































































”A " Consolev HIML CSS Script DOM 


@ Clear Persist Profile All Errors Warnings Info Del 





Vrrrrooooooom - I'm driving! 14.3_u..ne.html (line 28) 
The turbo makes a big difference! 14.3_u...ne.html (line 51) 
Turbo I4 14.3_u..ne.html (line 57) 





图 13-4 ”实例 化 Premiumcar 类 的 结果 


刚刚 已 经 成 功 通过 Ext .define 扩 展 了 一 个 类 : 首先 构建 一 个 类 ( MyApp.car.BaseCar )， 然 后 
扩 展 它 ( MyApp.car.PremiumCar 由 二 你 可 以 扩 展 MyApp .car.PremiumCar ， 并 创 建 
MyApp .car.Sportscatr 类 以 添加 一 些 功 能 ( 比如 arift() 或 者 aragRace() )。 

现在 ， 你 已 经 知道 如 何 用 JavaScript 和 Ext .define 做 原型 继承 了 ， 可 以 在 Ext JS 中 使 用 扩 
展 了 。 


13.3 扩展 Ext JS 组 件 


开发 框架 的 扩展 是 为 了 在 重用 已 经 存在 的 类 的 基础 上 引入 新 的 功能 。 重用 性 驱动 了 框架 , 使 
用 得 当 的 话 ， 它 可 以 提升 应 用 的 开发 。 
一 些 开 发 人 员 创建 一 些 预 先 配 置 好 的 类 , 它 通过 把 配置 参数 直接 填 入 到 类 的 定义 上 来 减少 应 
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用 级 别 的 代码 。 这样 的 扩展 可 以 减轻 应 用 代码 管理 大 量 的 配置 , 它们 只 需要 简单 地 实例 化 这 些 类 
就 可 以 了 。 这 种 设计 模式 是 不 错 的 , 但 是 应 该 只 有 在 期 望 杜绝 一 个 预 配置 的 类 有 多 个 实例 的 情况 
下 使 用 。 如 果 定 义 一 个 类 仅仅 把 它 用 来 放 一 系列 的 配置 参数 是 很 浪费 的 。 

其 他 的 扩展 添加 一 些 功 能 ， 壁 如 工具 方法 ,或 者 类 内 部 嵌入 的 行为 逻辑 。 一 个 这 样 的 例子 是 
表单 面板 在 保存 失败 的 时 候 自动 地 弹出 一 个 消息 框 。 在 部 件 包含 一 些 受 限 的 内 置 行为 逻辑 的 地 方 ， 
Jesus 经 常 因为 这 个 特殊 的 原因 为 应 用 程序 创建 一 些 扩展 。 之 所 以 说 受 限 ， 是 因为 Ext JS 4.0 现 在 已 
经 有 了 MVC 架 构 ， 它 允许 把 业务 逻辑 抽象 到 控制 层 上 。 这 是 我 们 下 一 章 将 要 讨论 的 。 

我 最 喜欢 的 扩展 是 一 种 我 称 为 组 合 部 件 的 东西 , 它 能 把 一 个 或 多 个 部 件 合并 到 一 个 类 中 。 举 
两 个 例子 : 有 一 个 内 置 的 网 格 面板 的 一 个 窗口 , 或 者 一 个 内 置 了 标签 面板 以 在 多 个 标签 中 分 布 字 
段 的 表单 面板 。 

这 就 是 我 们 即将 要 关注 的 扩展 类 型 。 你 将 要 把 网 格 面 板 和 菜单 合并 起 来 。 


13.3.1 想 想 你 在 构建 什么 


当 构 建 扩展 的 时 候 , 你 可 能 想 要 退 一 步 来 分 析 一 下 来 自 所 有 方面 的 问题 。 有 时 候 问 题 可 能 非 
常 复杂 ， 比 如 创建 一 个 魔术 般 的 动态 部 件 , 它 包 含 大 量 的 必须 被 UI 控制 的 工作 流 规则 。 通 常 ， 扩 
展 可 以 用 来 解决 重用 的 问题 。 这 将 是 我 们 在 剩 下 来 的 章节 中 要 重点 来 看 的 。 

回想 一 下 ， 我们 在 第 8 章 中 研究 了 网 格 面板 的 创建 。 你 附加 了 一 个 菜单 并 在 网 格 的 
contextmenu 事 件 被 触发 时 把 它 设 置 成 显示 。 当 时 销毁 网 格 面板 的 时 候 ， 你 不 得 不 手动 地 把 菜 
单 配 置 成 销毁 。 如 果 在 一 个 需要 泻 染 多 个 网 格 面板 和 一 些 菜 单 的 应 用 程序 上 推断 这 些 任务 ， 就 可 
以 清晰 地 看 到 你 需要 在 这 一 工作 中 引入 多 少 重复 代码 。 在 写 代码 之 前 , 让 我 们 花 一 点 时 间 分 析 一 
下 问题 ， 并 找到 可 能 的 最 好 解决 方案 。 

要 减少 重复 代码 的 风险 , 你 需要 创建 网 格 面板 的 扩展 , 它 需 要 能 够 自动 地 处 理 菜单 项 的 实例 
化 和 销毁 。 为 了 使 这 个 扩展 更 健壮 ， 还 可 以 给 它 加 哪些 功能 呢 ? 

首先 要 考虑 到 事 是 RowSelectionModel 和 CellSelectionModel 的 获取 方法 和 设置 方法 
的 不 同 选择 。RowSelectionModel 有 selectRow 和 getSelected， 而 CellSelectionModel 
有 electcel1 和 getSselecteqcel1。 如 果 扩展 能 够 处 理 网 格 面板 选择 模型 的 这 一 变化 ， 那 会 很 
棒 。 这 样 的 功能 可 以 减少 应 用 层 的 大 量 代 码 。 

考虑 类 的 设计 时 必须 要 想 想 实现 的 多 种 可 能 方法 。 比 如 说 ， 需 要 能 够 传人 会 被 转变 成 Menu 
实例 的 配置 对 象 : 






























































































































































EXt .create('MyApp .gridq Panel', { 
A/ (其 他 配置 选项 ) 


{ text : 'menu item 1' }, 
{ text : 'menu item 2' } 
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或 者 能 够 传人 menu .Item 配 置 对 象 的 数组 : 


Ext .create('MyApp.grid Panel', 
A (其 他 配置 选项 ) 
menu :[ 
{text s ‘enw Litem Lr 3}y 
{text, : menu iteém 2 )} 


所 
或 者 一 个 作为 menu 配 置 的 Ext .menu .Menu 实 例 : 








Var myMenu = Ext.create('Ext.menu.Menu', { 


items : [ 
{ text : 'menu item 1' }, 
{ text : 'menu item 2' } 


] 

De 

Ext .create('MyApp .gridq Panel', { 
J i (其 他 配置 选项 ) 
menu : myMenu 


De 
有 了 这 样 的 灵活 性 之 后 , 子 类 实现 就 符合 框架 的 思想 了 , 并 且 也 使 得 子 类 可 以 被 超过 一 种 的 
方式 来 使 用 。 把 这 个 记 在 脑子 里 ,对 于 在 应 用 程序 中 设计 类 非常 重要 。 当 你 对 需要 解决 的 问题 有 
了 清晰 的 理解 之 后 ， 就 可 以 构造 自己 的 第 一 个 Ext JS 扩 展 了 。 
































13.3.2 扩展 GridPanel 

扩展 GridqPanel1 需 要 用 到 Ext .define。 下 面 的 代码 清单 包含 了 将 要 创建 的 扩展 的 模板 。 最 
好 把 这 段 代码 放 到 独立 的 文件 中 ， 并 被 HTML 包 含 进去 。 因 为 没有 使 用 加 载 咽 ,你 可 以 把 它 命名 
为 ContextMenuGridPanel.js。 


代码 清单 13-5 ”网 格 面板 的 扩展 


Ext .define('MyApp.grid.ContextMenuGridPanel', { 











extend : 'Ext.grid.GridPanel', 
alias : 'widget.contextmenugrid', 
a 定义 构造 器 
constructor : function() { 
this.callParent (arguments); 


if (this.menu) { 
if (! (this.menu instanceof Ext.menu.Menu)) { ”四 构建 菜单 
this.menu = this.buildMenu (this.menu); 


} 


this.on(t 

scope Eh 

itemcontextmenu : this.onItemContextMenu 钧 住 itemcontextmenu 
)) ; 事件 
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buildMenu : function(menucftg) 


{ 
if (Ext.isArray (menuCfg)) { Ce 添加 菜单 工厂 方法 
menuCfg = { # 


items : menuCfg 
人 
} 


return Ext.create('Ext.menu.Menu', menuCfg); 
onItemContextMenu : function(grid, model, row, index, evt) { 

evt.stopEvent (); 

this.menu.showAt (evt .getxY ()); 
j 处 理 itemcontextmenu 事 件 


onDestroy : function() { 


人 ee | < 清除 残余 菜单 

} 

this.callParent (arguments); 
}3 | 
代码 清单 13-5 包 含 了 扩展 的 代码 ， 并 提供 了 三 个 会 被 应 用 到 子 类 的 原型 中 的 方法 。 第 一 个 是 
constructor 方 法 @， 它 是 扩展 网 格 面板 的 载体 。 在 这 个 方法 中 首先 调用 超 类 的 构造 器 ， 然后 
判断 this .menu@ 是 否 存 在 。 如 果 存 在 并 日 不 是 Ext .menu.Menu 的 实例 ， 就 用 builaMenu 工 厂 
方法 @ 并 传人 this .menu 引 用 来 构建 一 个 菜单 。 

在 builgaMenu 工 厂 方法 中 要 判断 menucfg 是 否 指 向 一 个 存在 的 Ext .menu .Menu 的 实例 。 如 
果 不 是 ， 需 要 用 Ext .isArray 来 验证 一 下 它 是 不 是 一 个 普通 的 数组 。 如 果 是 一 个 数组 ， 就 需要 
把 它 封 装 到 对 象 里 面 ， 以 便 Menu 的 父 类 container 能 用 来 做 它 需 要 做 的 事情 。 

最 后 还 有 一 点 关于 扩展 的 构造 器 ， 它 能 够 处 理 注册 itemcontextmenu 事 件 的 监听 器 合 ， 即 
onItemContextMenu@, 这 个 监听 器 负责 全 Ext .EventObj ect 引 用 (evt ) 上 调用 stopEvent (8 
它 会 屏蔽 浏览 器 自 己 的 上 下 文 莱 单 。 然 后 它 会 指示 菜单 在 事件 自己 的 X 和 Y 坐 标 上 展示 出 来 。 

最 后 ，onDestroy 方 法 @ 扩 展 了 GridPanel 类 自己 的 onDestroy 方 法 。 这 里 ， 你 可 以 在 菜 
单 存 在 并 有 aestrovy 方 法 的 时 候 ， 为 它 编写 自动 销毁 功能 。 

现在 有 了 自己 的 定制 化 扩展 ， 继 续 向 前 吧 。 


13.3.3 ”实践 你 的 扩展 


当 讨 论 网 格 面板 扩展 的 构造 器 时 ， 我 们 提 到 了 实现 的 三 种 模式 : 配置 对 象 的 menu 引 用 可 以 
设置 成 nenu. Item 配置 对 象 的 数组 ,一 个 Menu 的 实例 , 或 者 一 个 为 Menu 实 例 而 设计 的 配置 对 象 。 
在 这 个 实现 中 , 你 将 会 选择 第 一 种 模式 ,使 用 nenu.Item 配 置 对 象 的 数组 。 这 么 一 来 可 以 在 扩展 
构造 器 里 面 看 到 Menu 的 自动 实例 化 过 程 。 
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下 面 的 代码 清单 包含 了 实现 代码 。 因 为 有 不 少 配置 要 放 在 这 里 以 让 网 格 面板 工作 , 所 以 它 显 
得 元 长 了 点 儿 。 但 是 现在 你 应 该 对 数据 存储 和 网 格 面板 相当 熟悉 了 , 所 以 读 起 来 应 该 会 相对 轻松 
很 多 。 


代码 清单 13-6 ”为 扩展 实现 创建 一 个 远程 JSON 存 储 器 




















Ext .define('MyModel', { 
ext en : 'Ext.data.Model', _ 定义 模型 
fields : [ 
'firstname', 
'lastname' 
] 
二 
en 配置 远程 JSON 存 储 
Var remoteJsonStore = Ext.create('Ext.data.Store', { 
autoLoad : true, 
model : 'MyModel', 
proxy 2 你 
type SON 
url : 'http://extjsinaction.com/dataQuery .php', 
reader : { 
type : 'json', 
root : 'records' 
} 
} 
}); 设置 点 击 处 理 程序 
Var onMenuItemClick = function(menuItem) { 
var gridPanel = _ Ext .Componentouery .query ('contextmenugrid')1[0], 
selModel = gridPanel.getSelectionModel () ， 
selectedRec = selModel.getSelection() [0], 
msg = Ext.String.format( 


OF 3 RE 2 

menuItem.text, 

selectedRec.get ('lastname'), 

selectedRec.get ('firstname') 
); 


Ext .MessageBox.alert ('Feedback', msg); 
人 


二 汪 - 了 
xtype : 'Contextmenugrid', 
store : remoteJsonStore, 
columns : [ 

{ 
header : 'Last Name', 
dataIndex : 'lastname', 
下 | 售 痉 2 
3 
{ 
header : 'First Name', 


dataIndex : 'firstname', 
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flex -Jl 


text : 'Add Record', 
handler : onMenuItemClick 


new Ext.Window!({ 
height : 300, 
width : 300, 
border : false, 


layout : 'fit', 
items : grid 
}) .show(); 


8 定义 菜单 配置 


本 实现 窗口 内 自 定义 网 格 





代码 清单 13-6 做 了 不 少 事情 来 配置 定制 的 GriaPanel 类 ,首先 , 配置 了 模型 @Q 和 远程 的 JSON 
存储 器 @@ 。 人 然后 ,设置 菜单 点 击 处 理 程序 onMenuItemclick 合 ,， 它 用 以 在 某 行 数据 被 右 击 的 时 








候 ， 显 示 一 个 警告 信息 杠 




















接 下 来 要 配置 一 个 简单 的 JavaScript 对 象 @， 由 Ext JS 用 来 配置 定制 化 的 contextMenu- 
GridPanel 类 的 实例 。 通 过 把 xtype 属 性 设置 为 'contextmenugrid' 来 完成 这 一 点 。 注 意 这 里 
属性 的 合 。 这 将 会 被 ContextMenuGrigdPanel 类 用 来 创 














是 如 何 用 简单 对 象 配置 数组 来 作为 menu 











建 一 个 Menu 实 例 ， 并 通过 注册 了 的 itemcontextmenu 事 件 处 理 程序 来 展示 它 。 
最 后 ， 在 Window 实 例 @ 上 泻 染 这 个 组 件 ， 显 示 效 果 如 图 13-5 所 示 。 





x 

Last Name First Name Last Name F Nam 
Acevedo Venus Ac 
Acevedo Stone A 
Acevedo es AG Feedback x 
Acosta Add Record Ac 
AoE 内 joan ac Add Record : Acevedo, Hillary 
Acosta Cadman Ac 
Acosta Minerva Ac OK 
Acosta Quyn Acosta 0) 
Adkins Carly A Carly 
Aguirre Elliott A Elliott 
Aguirre Clementine Ag Clement 
Amairra 1ammalia A 1amal 

图 13-5 ”第 一 次 使 用 定制 的 网 格 面板 扩展 
































可 以 看 到 , 定制 的 网 格 面板 如 预期 那 般 工作 了 。 把 这 段 代码 导入 到 项 目 中 , 它 会 非常 优雅 地 
工作 。 但 是 在 有 些 场景 下 ,你 可 能 想 要 选择 插件 而 不 是 直接 扩展 网 格 面板 来 增加 这 些 功 能 。 比 如 
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说 , 如 果 有 一 个 已 经 在 开发 的 或 者 已 经 在 生产 中 的 应 用 , 怎么 办 呢 ? 如 何 把 这 些 扩展 注入 到 继承 
链 中 去 并 且 不 引入 风险 呢 ? 

我 们 再 假设 想 要 把 这 一 功能 添加 到 所 有 的 数据 绑 定 类 型 的 视图 : 网 格 、 树 和 通用 视图 。 要 适 
应 这 样 的 需求 ， 就 不 得 不 为 每 一 个 类 创建 扩展 ， 这 会 导致 很 多 重复 代码 。 

这 一 问题 唯一 可 行 的 解决 方案 是 插件 。 


13.4 用 插件 来 救援 


插件 是 在 Ext JS 2.0 版 本 中 引入 的 。 它 解决 了 上 述 问 题 , 支持 跨 部 件 实现 功能 ,而 不 需要 创建 
扩展 。 事 实 上 ， 可 以 给 组 件 附 加 任意 多 的 插件 ， 这 使 得 插件 更 加 强大 。 
























































重 温 组 件 生命 周期 
如 果 你 不 记得 插件 是 什么 时 候 创建 和 初始 化 的 ,现在 是 复习 组 件 生命 周期 中 的 初始 化 阶段 
的 绝 佳 时 间 。 第 3 章 有 这 一 内 容 。 

















在 我 们 深入 研究 怎么 创建 插件 之 前 ， 让 我 们 先 快 速 聊 一 下 插件 是 怎么 工作 的 。 


13.4.1 插件 的 剖析 
插件 的 基本 结构 是 简单 的 。 它 从 定义 类 并 扩展 AbstractPlugin 开 始 : 








Ext .define('MyPlugin', { 


extend : 'Ext.AbstractPlugin', 
alias : 'plugins.myplugin' 
// 做 些 事 


3 


这 一 小 段 代 码 展示 了 使 用 Ext .define 创 建 插 件 的 基本 步骤 。 创 建 插 件 ， 最 好 扩展 
Ext .AbstractPlugin 类 ， 因 为 它 提 供 了 必要 的 功能 ， 比 如 在 父 节点 自 销 毁 之 后 控制 插件 销毁 。 

在 这 个 模板 中 设置 alias 为 'plugins .myplugin'。 把 插件 的 别名 的 前 级 设置 为 plugins， 
这 使 得 Ext JS 类 管理 系统 把 这 个 类 的 注册 交 给 PluginManager。PgluinManager 人 负责 通 过 懒 对 
象 一 一 这 很 像 XTypes， 只 是 在 这 里 它们 叫 作 PTypes， 来 创建 类 实例 。 

下 面 是 通过 懒 对 象 在 一 个 通用 的 组 件 实例 上 配置 插件 的 例子 : 
















































































EXtL .create('Ext.Component', { 
plugins : [ 
{ 
ptype : 'myplugin' 
} 
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在 这 段 代码 中 创建 一 个 Ext .component 的 实例 ， 并 把 它 的 plugins 属 性 设置 为 有 一 个 对 象 
的 数组 。 这 个 对 象 有 一 个 ptype 属 性 ， 被 设置 为 'myplugin'。 当 一 个 组 件 快要 结束 初始 化 阶段 
的 时 候 ， 它 会 通过 PType 捷 径 来 创建 一 个 定制 插件 的 实例 。 

扩展 AbstractPlugin 被 Sencha 核 心 开发 团队 认为 是 最 佳 实践 。 定 制 插件 的 时 候 需要 用 到 它 。 


13.4.2 ”开发 一 个 插件 


我 们 已 经 剖析 了 插件 类 。 我 们 展示 了 基础 内 容 ， 即 如 何 注 册 一 个 插件 ， 并 通过 一 个 简单 PType 
配置 对 象 来 配置 它 。 接 下 来 , 我 们 利用 这 些 知识 在 下 面 的 代码 清单 中 创建 定制 的 ViewcontextMenu 
插件 类 。 


代码 清单 13-7 定制 的 视图 插件 






































Ext .define('MyApp.plugin.ViewContextMenu', { 
extend : 'Ext.AbstractPlugin', w 定义 ViewContextMenu 插 件 
alias : 'plugin.viewcontextmenu', 
设置 由 i: UGCtTOnG) 4 
PType if (this.menu) { 
别名 if (! (this.menu instanceof Ext.menu.Menu)) { 四 定义 init 方 法 


this.menu = this.buildMenu (this.menu); 


} 


this.cmp.on({ 
scope : this, 
itemcontextmenu : this.onItemContextMenu ed 
}); 监听 器 
} 
jy 
buildMenu : function (menuCfg) 
if (Ext.isArray (menuCfg)) 
menuCfg = { 
items : menuCfg 


{ 
{ 


ap 

} 

return Ext.create('Ext.menu.Menu', menuCfg); 
3 
onItemContextMenu : function(view, model, row, index, evt) { 

evt.stopEvent (); 

this.menu.showAt (evt .getxY()); 
} 


destroy : function() { 
if (this.menu && this.menu.destroy) { es 
this.menu.destroy (); 


} 
} 
如 代码 清单 13-7 所 示 ， 大 多 数 的 代码 和 扩展 中 的 一 样 ， 不 同 的 是 定义 了 一 个 扩展 
AbstractPlugin 的 类 @。 遵 循 最 佳 实践 ， 你 设置 了 插件 的 别名 人 @。 
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接 下 来 创建 一 个 init 方 法 合 , 它 负 责 侦 测 插件 ， 并 注册 视图 的 itemcontextmenu 事 件 处 理 
程序 人 @。destroy 方 法 @ 负 责 销毁 实例 化 了 的 菜单 实例 。 

要 使 用 这 个 插件 ， 可 以 重用 代码 清单 13-6 中 的 几乎 所 有 代码 。 最 大 的 差别 是 配置 网 格 面 板 的 
方式 。 下 面 的 代码 清单 展现 了 实现 上 的 不 同 。 


代码 清单 13-8 配置 和 展现 网 格 面板 
// 此 处 为 代码 清单 13-6 中 的 模型 、 存 储 和 莱 单 点 击 处 理 程序 











var grid = { 
xtype  : 'griqd', “二 添加 网 格 面板 
store : remoteJsonStore, 
columns : [ 
{ 
Header : 'Last Name', 
dataIndex : 'lastname', 
flex 和 村 
和 泡 
{ 
header : 'First Name', 
dataIndex : 'firstname', 
flex Ca 


} 
J 
访 江 过 G 人 全 


{ 
ptype : 'viewcontextmenu', 
ee 配置 插件 


text : 'Add Record'， 
handler : onMenuItemClick 


} 


} 
] 


上 
// 显示 风格 面板 的 窗口 代码 


代码 清单 13-8 中 配置 了 一 个 通用 的 网 格 面板 xtype 对 象 @Q@， 它 使 用 了 前 面 配 置 的 自 定义 的 
ViewContextMenu 插 件 ， 并 日 通过 Ext .winaqow 来 展示 它 。 在 这 个 实现 中 ， 通 过 plugins 引 用 
只 配置 了 一 个 揪 件 。 如 果 有 多 个 插件 , 那么 就 需要 配置 成 插件 数组 @,， 如 plugins: [ pluginl， 
Dlugin2，etc]。 

在 屏幕 上 泻 染 的 话 ， 会 得 到 和 网 格 面板 扩展 同样 的 功能 ， 如 图 13-6 所 示 。 

如 果 你 想 要 阅读 其 他 更 为 复杂 的 插件 的 源 代码 ， 可 以 在 ExtJS SDK 的 examples/ux 文 件 夹 下 找 
到 一 些 例 子 。 我 们 这 里 将 要 提 到 的 两 个 插件 是 由 本 书 作者 Jesus ) 在 早先 3.0 版 本 中 创建 的 ， 现 
在 由 Sencha 的 开发 团队 维护 。 
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x 
Last Name First Name Last Name First Name 
Acevedo Venus Aceved 
Acevedo Stone Aceved St 
AR en Ag Feedback x 
Acosta Add Record Ac 
Acosta 山 “]oan Ac _ Add Record : Acevedo, Hillary 
Acosta Cadman 
Acosta Minerva AC OK 
Acosta Quyn Acosta Qun 
Adkins Carly Ad Ca 
Aguirre Elliott Ag Eilio 
Aguirre Clementine Aguirre Clementine 


Amiirra 1amalia 




















图 13-6 ”第 一 次 使 用 定制 的 网 格 面板 扩展 

















第 一 个 是 TabScrollerMenu ( TabScrollerMenu.js )， 如 图 13-7 所 示 。 这 个 搬 件 给 滚动 选项 面板 
增加 了 一 个 菜单 ， 并 人 允许 用 户 选择 并 聚焦 到 一 个 选项 面板 上 , 这 比 滚动 更 容易 操作 。 要 想 看 这 个 
插件 是 如 何 工 作 的 ， 可 以 在 浏览 器 中 打开 <your extjs dir>/examples/tabs/tab-scroller-menu.html。 











Exercising scrollable tabs with a tabscroller menu X 


Our first t: Tab#1 Tab#2 Tab 订 3 Tel 中 


ltems 1-5 上 


ltems6-10 上 | Tab#5 
ltems 11- 15 Tab#6 
ltems 16 - 20 上 ab#7 
ltems 21- 23 上 Tab#8 


| Tab#9 


图 13-7 TabScrollerMenu 插 件 





第 二 个 是 ProgressBar 分 页 工具 条 ( ProgressBarPager.js )， 它 在 分 页 工具 部 件 上 添加 了 一 个 有 
动画 效果 的 进度 条 ， 这 使 得 分 页 工具 条 更 好 看 了 ， 如 图 13-8 所 示 。 要 看 这 个 插件 如 何 工 作 ， 浏览 
侣 打开 <your extjs dir>/examples/build/KitchenSink/ext-themeneptune/#progress-bar-pager。 

我 们 就 这 样 结束 了 插件 的 探索 。 你 现在 已 经 知道 如 何 创 建 插件 来 给 项 目 增强 功能 。 如 果 你 有 
使 用 一 个 插件 的 想法 ,但 是 不 知道 它 是 不 是 已 经 被 实现 过 了 ， 请 访问 Ext JS 论 坛 : 
http://sencha.com/forum。 有 专门 的 一 个 板块 是 来 讨论 扩展 和 插件 的 。 社 区 成 员 在 那里 发 布 了 他 们 
的 作品 ， 有 一 些 是 完全 免费 的 。 

Sencha 拥 有 可 观 数 量 的 用 户 自 定义 扩展 ， 旦 可 在 其 市 场 上 下 载 到 。 你 可 以 访问 http://market. 


sencha.com。 
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Sliding Pager 
Company Price ~ Change 3% Change ”LastUpdated 
Intel Corporation S19.88 0.31 1.58% 09/01/2009 
Microsoft Corporation S25.84 0.14 0.54% 09;01/2009 
Pfizer inc S27.96 0.4 1.45% 09/01/2009 
Alcoa Inc S29.01 0.42 1.47% 09;01/2009 
General Motors Corporation S30.27 1.09 3.74% 09/01/2009 
AT&T Inc. S31.61 0.48 1.54% 09/01/2009 
General Electric Company S34.14 0.08 0.23% 09/01/2009 
The Home Depot, Inc. S34.64 0.35 1.02% 09/01/2009 
Verizon Communications S35.57 0.39 1.11% 09/01/2009 
Hewiett-Packard Co S36.53 -0.03 -0.08% 09/01/2009 
Pagej 1o0f3 by bi | 仿 Dp Splaying 1 - 10 of 29 

















图 13-8 ”一 个 添加 在 页 面 工具 栏 上 的 动画 进度 条 插件 


接 下 来 我 们 要 讨论 Ext JS 的 类 加 载 系统 。 开 发 应 用 之 前 你 绝对 需要 这 些 信息 ， 相 信 我 们 ! 这 
会 为 你 节约 大 量 的 时 间 。 


13.5 ”使 用 Ext JS 加 载 器 的 动态 加 载 类 


Ext JS 4 的 新 特性 之 一 就 是 动态 类 加 载 系统 ， 它 利用 了 依赖 模型 。 开 发 应 用 的 时 候 有 多 种 选 
择 可 以 考虑 ， 每 一 种 选择 都 各 有 优 缺 点 ， 我 们 将 逐一 探讨 。 


ExtJS 提 供 了 一 个 选择 , 就 是 可 以 动态 加 载 几乎 所 有 的 JavaScript 文 件 。 动态 加 载 框架 的 文件 ， 
这 样 就 能 够 快 ; J 及 初始 页 面 ， 这 对 于 基于 因特网 的 应 用 是 非常 理想 的 。 

要 做 到 这 一 点 ， 你 需要 引入 ext-all.css 和 ext-debug.js 文 件 。 文 件 开头 需要 像 这 样 写 : 

<link rel="stylesheet" type="text/css" 


href="js/ext4/resources/css/ext-all.css" /> 
<script type="text/javascript" src="js/ext4/ext-debug.js"></script> 


加 载 ext-debug.js 会 加 载 Ext JS 基础 上 的 调试 版 本 ， 这 一 调试 版 本 包含 了 基本 的 类 系统 、 工 具 

类 ( 如 可 观察 类 和 元 素 类 )， 以 及 加 载 器 的 框架 。 这 意味 着 框架 的 剩余 部 分 不 会 在 内 存 中 ; 因此 ， 
它们 也 需要 加 载 。 要 验证 这 些 ， 需 要 在 屏幕 上 泻 染 一 些 东西 。 

下 面 是 泻 染 一 个 Ext .window 的 代码 : 



























































EXt .omnReady (function() { 
EXt .create('Ext.windaow.NWindaow'，({ 
height : 100， 
width : 100, 
html : 'I loaded dynamically.' 
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访问 这 个 页 面 tp de a 但 是 想 要 理解 发 生 了 什么 ， 你 就 要 看 底 
层 的 逻辑 了 。 要 做 到 这 些 ， 可 以 用 类 似 Firebug 这 样 的 调试 工具 ( 参见 图 13-9 )。 


[Ext.Loader] Synchronously loading “Ext,.window.Window'; consider adding ext-debug.js (line 6198) 
Ext.require('Ext.window.Window') above Ext.onReady 

GET http:/ /ext4ia/ext4/src/window/Window.js? dc=1308739656143 :2 

GET http:/ /ext4ia/ext4/src/panel/Panel.js? dc=1308739656160  : m 

GET http:/ /ext4ia/ext4/src/panel/AbstractPanel.js? dc=1308739656185 2 

GET http:/ /ext4ia/ext4/src/container/Container.js? dc=1308739656203 2 1 
GET http:/ /extAia/ext4/src/container/AbstractContainer.js? dc=1308739656221 2 
GET http:/ /ext4ia/ext4/src/Component.js? dc=1308739656235 

GET http:/ /ext4ia/ext4/src/AbstractComponent.js? dc=1308739656257 ， JK 11 
GET http:/ /ext4ia/ext4/src/util/Observable.js?_dc=1308739656287 

GET http:/ /ext4ia/ext4/src/util/Animate.js?_dc=1308739656308 


图 13-9 Firebug 的 控制 台 视图 ， 展 示 了 Ext JS 抛 出 的 警告 信息 以 及 动态 加 载 类 的 日 志 


当 读 取 加 载 类 的 文件 名 时 ， 你 开始 发 现 Ext JS 在 用 有 点 过 时 的 方式 加 载 类 ， 这 和 依赖 系统 有 
关 。 图 13-10 展 示 了 Ext JS 的 winaow 继 承 模型 ， 这 会 帮助 你 更 好 地 理解 这 个 类 的 加 载 。 


和 时 下 














AbstractComponent 





Y 





Component 





了 





panel.AbstractPanel 








Panel 











window.Window 














图 13-10 ”Ext JS 窗口 继承 模型 


这 段 代码 实例 化 了 一 个 Ext .window .Window 实 例 ， 然 后 看 到 像 Panel 这 样 的 一 些 类 被 加 载 
了 。 从 图 13-10 中 可 以 发 现 一 个 逆向 的 类 加 载 模式 ， 这 是 由 于 Wingdow 需 要 Panel， 而 Panel 需 要 
AbstractPanel。ExtJS 加 载 了 window 并 读 取 它 的 依赖 , 然后 加 载 Panel。 然后 , 它 又 会 读 Panel 
的 依赖 并 加 载 AbstractPanel， 等 等。 区 本 
早 些 时 候 ，Ext JS 警告 说 它 是 同步 地 加 载 Window 类 。 它 警告 你 的 原因 是 它 通 过 同步 的 XHR. 
来 加 载 类 ， 这 意味 着 请 求 是 阻塞 的 。Ext JS 执行 代码 去 创建 一 个 窗口 ， 并 处 理 所 有 的 需求 ， 但 是 
在 这 个 时 候 没 有 其 他 的 JavaScript 代 码 可 以 执行 。 
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在 想 要 加 载 框架 的 一 大 堆 代 码 时 , 这 种 加 载 JavaScript 类 的 方式 会 显得 有 点 慢 。 我 们 建议 在 使 


用 框架 的 一 个 最 小 形式 ， 


比如 用 于 快速 演 染 一 些 ( 如 登录 窗口 等 ) 内 容 时 使 用 这 种 方式 。 





如 果 登 


录 成 功 了 ， ee 要 的 Ext JS 类 文件 。 


关于 这 一 模式 我 们 有 一 








试 的 , 因为 通过 XHR 加 载 的 脚本 文件 是 在 运行 时 执行 的 。 这 








要 做 更 多 的 工作 。 


13.5.2 ”应 该 按 需 加 载 


前 面 你 在 在 Bxt .onReady 的 框框 内 创建 了 window 实 例 。 虽 说 这 完全 可 行 
个 问题 的 解决 办 法 
么 做 需要 的 代码 : 





的 同步 加 载 。 这 
下 面 是 这 


Ext .zeGquire( 


需要 提醒 注意 ， 这 种 模式 下 ExtJS 同 步 加 载 的 JavaScript 是 不 外 0 
这 个 问题 是 有 一 个 解决 方案 , 但 是 





点 需 





尔 需 
尔 需 








， 但 却 触 发 了 框架 类 
告诉 Ext JS 需 要 在 Ext .onReady 之 外 使 用 window 类 。 








是 


'Ext .window.Window'); 


Ext .onReady (function() { 


Ext .createl( 


height : 
width : 100, 
html 

}) .Show() 


i 


'Ext .window.Window', { 
100, 


'I loaded dynamically.' 


在 Ext .onReady 调 用 外 面 增加 一 个 require 语 句 ， 告 诉 Ext JS 立 即 加 载 Window 类 所 有 的 依 





赖 ， 这 么 做 在 某 种 意义 上 使 得 调试 更 容易 了 ， 并 能 够 让 Ext JS 不 再 对 你 


要 为 会 用 到 的 所 有 类 


本 愉 《 2 三 


三 | ” Console 


<> Edit 


body#ext....x-gecko 


“ 哆 哮 ” 了 。 这 意味 着 需 


调用 require 语 句 。 图 13-11 展 示 了 Firebug 的 HTML 视 图 的 一 个 截屏 。 


HTMLY Css Script DOM Net 


html.x-border-box 


v EI 
<head> 


bp <script type="text/javascript" 
<script type="text/javascript" 
<script type="text/javascript" 
<script type="text/javascript" 
<script type="text/javascript" 
<script type="text/javascript" 
<script type="text/javascript" 
type="text/javascript" 
type="text/javascript" 
<script type="text/javascript" 
<script type="text/javascript" 
<script type="text/javascript" 
<script type="text/javascript" 
<script type="text/javascript" 


<script 
<script 


FE 


图 13-11 


src="http://ext4ia/ext4/src/window/Window. js?_dc=1308741138279"> 
src="http://ext4ia/ext4/src/panel/Panel .js?_dc=1308741138357"> 
src="http://ext4ia/ext4/src/util/ComponentDragger .js?_dc=1308741138358"> 
src="http://ext4ia/ext4/src/util/Region, js?_dc=1308741138359"> 
src="http://ext4ia/ext4/src/panel/AbstractPanel .js?_dc=1308741138371"> 
src="http://ext4ia/ext4/src/panel/Header.js?_dc=1308741138372"> 
src="http://ext4ia/ext4/src/fx/Anim, js?_dc=1308741138373"> 
src="http://ext4ia/ext4/src/util/KeyMap ,js?_dc=1308741138374"> 
src="http://ext4ia/ext4/src/panel/DD. js?_dc=1308741138375"> 
src="http://ext4ia/ext4/src/XTemplate.js?_dc=1308741138376"> 
src="http://ext4ia/ext4/src/layout/component/Dock.js?_dc=1308741138377"> 
src="http://ext4ia/ext4/src/dd/DragTracker .js?_dc=1308741138389"> 
src="http://ext4ia/ext4/src/util/0ffset.js?_dc=1308741138396"> 
src="http://ext4ia/ext4/src/container/Container.js?_dc=1308741138408"> 





Firebug 的 实时 HTML 视 图 ， 呈 现 了 Ext JS 类 的 动态 加 载 


在 图 13-11 中 可 以 看 到 ， 很 多 的 脚本 标签 被 加 到 了 文档 开头 部 分 。 因 为 在 
添加 了 require 语 人 句 ， 它 便 注 入 了 这 些 脚 本 标签 ，; 
载 类 了 ， 而 不 需要 执行 





在 Ext .onReagdy 之 前 





这 就 使 得 Ext JS 可 以 通过 传统 的 脚本 标签 来 加 
这 些 脚本 。 这 种 技术 最 大 的 好 处 是 让 你 能 够 调试 Ext JS 的 JavaScript。 
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这 种 使 用 Ext JS 的 方式 是 解决 调试 问题 的 最 好 选择 了 。 这 是 因为 类 是 单独 被 加 载 的 ， 所 以 可 
以 把 问题 隔离 到 具体 的 类 上 。 但 是 它 很 慢 。 在 本 地 的 开发 环境 上 ,我 们 看 到 加 载 一 个 页 面 的 时 间 
超过 1 秒 。 它 慢 的 原因 是 一 个 个 地 加 载 类 文件 的 话 会 有 不 少 的 请 求 次 数 。 这 显然 不 会 是 快速 应 用 
开发 周期 的 最 佳 模式 。 

你 需要 修正 一 下 这 个 方案 来 补救 这 一 场景 。 












































13.5.3 ”采用 混合 的 方案 


到 目前 为 止 ， 你 已 经 看 到 了 两 种 使 用 加 载 器 来 加 载 Ext JS 类 文件 的 方法 。 两 种 方法 都 有 各 自 
的 优 缺 点 。 如 果 是 在 内 部 网 络 上 , 即 网 速 不 是 问题 , 那么 使 用 一 个 混合 的 方案 可 以 达到 两 全 其 美 。 
你 可 以 在 一 次 请 求 中 加 载 所 有 的 Ext JS， 然 后 动态 地 加 载 自己 的 类 文件 。 

为 了 研究 这 种 混合 方案 , 我 们 会 提供 在 第 13 章 的 示例 目录 下 的 一 个 极度 简约 的 应 用 。 目 录 结 
构 如 图 13-12 所 示 。 当 观察 目录 结构 的 时 候 , 注意 文件 是 根据 命名 空间 组 织 到 硬盘 上 的 , 从 MyApp 
目录 开始 。 























时 MyApp 
” model 
wi UserModel.js 
了 store 
是 UserStore.js 
了 View 


ws UserEditorWindow.js 
Ws UserFormPanel.js 
Wl UsersGridPanel.js 


图 13-12 ”我 们 示例 应 用 程序 的 文件 夹 结构 


这 个 应 用 程序 包含 了 一 个 相互 依赖 的 模型 ， 该 模型 既 需 要 Ext JS 的 类 ， 还 需要 命名 空间 内 的 
类 。 图 13-13 从 高 层次 上 审视 了 依赖 模型 。 


UserEditorWindow 
UserFormPanel | Ext.window.Window UserGridPanel 


| Ext.form.Panel | UserStore | Ext.grid.GridPanel 
UserModel | Ext.data. Store 


| Ext.data.Model | 






















































































图 13-13 ”需要 开发 项 层 的 带 命 名 空间 的 类 
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这 一 相互 依赖 的 模型 表明 了 Ext JS 会 兑现 配置 的 应 用 需求 。 并 且 ， 你 不 需要 为 应 用 代码 写 单 
个 脚本 标签 。 这 是 使 用 这 种 方式 最 大 的 好 处 。 

要 使 这 种 混合 模式 正常 发 挥 作用 必须 要 有 两 步 操作 ， 步 是 引入 ext-all-debug.js 来 替代 
ext-debug.js: 





<script type="text/javascript" src="js/ext4/ext-all-debug.js"></script> 


引入 ext-all-debug.js 可 以 一 次 加 载 整个 Ext JS 框 架 ， 这 会 减少 超过 一 半 的 页 面 加 载 时 间 。 
方式 的 缺点 是 ， 默 认 人 情况 下 Ext JR 的 框架 中 是 关闭 的 。 

你 需要 开启 类 加 载 系统 , 并 指示 它 应 用 程序 代码 在 何 处 开始 。 需 要 加 入 以 下 的 代码 来 做 到 这 
上 . 























Ext .Loader.setConfig(t{ 
enabled : true, 
paths : { 
MyApp : 'js/MyApp' 
} 
i 


Ext .require('MyApp.view.UserEditorWindow'); 


Ext .onReady (function() { 
Ext .create('MyApp.view.UserEditorWindow').show!(); 
j 泡 


这 段 代码 调用 了 Bxt. loader 单 例 上 的 setconfig 方 法 , 传人 了 一 个 对 象 来 开启 加 载 器 ,并 
设置 应 用 程序 的 路 径 。 然 后 ， 告 诉 Ext JS 去 获取 MyApp .view.UserEditorWindow 类 ,然后 魔力 
发 生 了 ! 

首先 你 会 注意 到 这 个 迷你 程序 在 屏幕 上 被 泻 染 了 (参见 图 13-14 )。 尽 管 看 到 程序 在 屏幕 上 出 
现 这 一 点 很 棒 ,， 但 是 魔力 是 在 底 ee 只 能 通过 Firebug 的 动态 HTML 标 签 看 到 。 你 将 看 到 的 
东西 非常 迷人 。 图 13-15 显 示 所 有 的 ExtJS 代 码 都 被 加 载 了 ,但 是 应 用 程序 类 是 动态 加 载 的 。 这 人 么 
做 最 大 的 好 处 是 不 需要 对 HTML 页 面 上 的 脚本 标签 感到 焦躁 不 安 了 。 




















First Name LastName DOB Login 

First Name: 
Louis Dobbs 12/21/34 ldobbs 

Last Name: 
Sam Hart 03/23/54 shart 
Nancy Garcia 01/18/24 ngardia DOB: 

User Name: 


Save New 


图 13-14 ”动态 加 载 的 迷你 程序 
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<script type="text/javascript" src="js/MyApp/view/UserEditorWindow.js?_dc=1386253871119"> 
<script type="text/javascript" src="js/MyApp/view/UsersGridPanel .js?_dc=-1386253871179"> 
<script type="text/javascript" src="js/MyApp/view/UserFormPanel .js?_dc=1386253871179"> 
<script type="text/javascript" src="js/MyApp/store/UserStore.js?_dc=13862538712901"> 
<script type="text/javascript" src="js/MyApp/model/UserModel .js?_dc=1386253871218"> 


图 13-15 ”Firebug 动 态 HTML 标 签 页 显示 类 被 通过 Ext JS 加 载 ， 你 不 需要 写 脚本 标记 


,全 名 A 























到 现在 为 止 , 你 很 可 能 想 知 道 下 一 步 怎 么 办 。 你 应 该 选择 哪 一 种 加 载 模式 ?你 确实 需要 思考 
这 些 问 题 。 
事实 是 动态 加 载 器 不 被 推荐 用 于 生产 。 在 开发 周期 内 ,我们 使 用 第 三 种 模式 (13.5.3 节 ) 它 
过 加 载 所 有 的 Ext JS 到 本 地 开发 环境 ， 并 能 够 动态 地 按 需 加 载 应 用 代码 来 达到 最 好 的 性 能 。 
对 于 生产 , 你 将 需要 使 用 SDK 工 具 在 准备 部 署 的 时 候 来 联接 并 缩减 应 用 代码 。 我 们 会 在 第 14 
章 中 探讨 这 些 工 具 。 


























总 





13.6 小结 


本 章 介 绍 了 如 何 用 基本 的 JavaScript 工 具 实 现 原 型 继承 ,阐述 了 这 一 继承 模型 是 如 何 一 步 一 步 
构建 的 。 利 用 这 些 基 础 知识 ， 你 用 Ext .define 这 一 类 定义 方法 重 构 了 子 类 。 

接 下 来 ， 你 使 用 了 所 有 基本 知识 来 实现 Ext JS 网 格 面板 的 扩展 ， 创 建 了 一 个 组 合 网 格 面板 和 
一 个 菜单 组 件 ， 实 现 了 自 定义 的 网 格 面板 扩展 ， 并 看 到 了 扩展 组 件 可 以 多 棒 。 

然后 , 你 了 解 到 扩展 在 需要 跨 部 件 重 用 的 时 候 能 力 有 限 ,。 绥 解 这 一 问题 的 方法 是 把 网 格 面板 
扩展 的 代码 转换 成 插件 ， 该 插件 可 以 用 于 任意 的 数据 视图 及 它 的 子 类 。 

最 后 是 实现 Ext JS 加 载 器 。 你 亲眼 目睹 了 如 何 用 三 种 常用 模式 来 使 用 加 载 器 ， 并 且 了 解 了 它 
们 各 自 的 优 缺 点 。 

在 最 后 一 章 中 ， 我 们 将 整合 本 书 介绍 的 所 有 知识 ， 探 索 构 建 复杂 应 用 的 行业 秘密 。 












































构建 一 个 应 用 








本 章 内 容 

口 像 Web UI 开 发 者 一 样 思 考 

口 理解 Ext JS 的 架构 

口 编写 一 个 基于 MVC 的 应 用 

口 使 用 Sencha Cmd 3 工具 进行 构建 























目前 为 止 ， 本 书 已 经 讲 了 Ext JS 的 组 件 、 部 件 和 数据 的 定义 以 及 它们 的 使 用 和 管理 方式 。 我 
们 已 经 了 解 了 如 何在 该 框架 下 实现 各 种 部 件 ， 并 且 分 别 探讨 了 其 中 复杂 的 知识 点 。 在 上 一 章 中 ， 
我 们 阐释 了 如 何 创建 定制 的 Ext JS 扩 展 ， 并 深入 介绍 了 类 加 载 系 统 的 工作 原理 。 

本 章 , 我 们 尝试 整合 在 本 书 中 学 到 的 所 有 知识 来 创建 一 个 实际 应 用 。 你 将 会 在 第 13 章 的 基础 
上 进行 实践 ， 通 过 实现 ExtJS 应 用 包 构 建 一 个 符合 MVC 开 发 模式 的 应 用 。 你 会 渐渐 了 解 控制 器 的 
工作 原理 以 及 它们 如 何 响 应 来 自 应 用 程序 类 的 事件 ,同样 也 将 学 会 用 Sencha Cmd ( Sencha 命 令 行 
工具 ) 测试 和 构建 产品 。 

在 写 代码 前 ， 我 们 先 来 回顾 一 下 创建 和 管理 Web 应 用 的 原则 。 无 论 你 将 来 的 应 用 是 大 是 小 ， 
都 应 该 时 刻 遵循 本 章 描述 的 原则 。 


14.1 像 Web UI 开发 者 一 样 思 


Web 应 用 几乎 和 Web 本 身 存 在 了 同样 长 的 时 间 。 在 2004 年 谷歌 的 Gmail 出 现 后 ，Web 应 用 这 个 
概念 才 广 泛 地 流行 起 来 。 那 之 后 的 几 年 里 ， 三 个 创建 Web 应 用 的 主要 原则 被 保留 下 来 : 
口 Web 是 移动 的 ; 

口 为 一 个 页 面 做 设计 ; 
口 优化 服务 器 端 服务 (API )。 

最 快 的 Web 应 用 是 about:blank ( 空白 网 页 ), 而 在 空白 网 页 添加 任何 东西 都 会 增加 加 载 和 运行 
时 间 。 “移动 优先 ”的 思考 方式 ， 管 党 迫使 你 将 信息 打包 成 轻 量 级 的 ， 这 是 为 预期 的 小 屏幕 移动 
设备 的 使 用 者 、 低 配置 的 电脑 用 户 、 有 限 带宽 的 上 网 用 户 而 考虑 的 。 我 们 并 不 是 暗示 要 用 Ext JS 
开发 移动 应 用 , 而 是 建议 假设 在 一 台 旧 电脑 前 有 个 用 户 使 用 你 的 应 用 的 场景 , 那 很 可 能 就 是 目标 
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平台 上 的 目标 用 户 。 

单 页 应 用 同样 是 数据 驱动 的 。 和 多 页 的 网 站 应 用 不 同 ,服务 器 对 单 页 网 站 仅仅 提供 数据 ， 而 
不 会 准备 多 个 HTML 视 网 。 浏 览 器 负责 根据 开发 者 写 的 包含 业务 逻辑 的 代码 ， 将 接收 到 的 数据 以 
有 意义 的 形式 展现 。 整 个 过 程 不 需要 加 载 或 重新 加 载 页 面 。 现 在 ,各 种 浏览 器 的 最 新 版 本 几乎 都 
支持 这 种 方式 ， 你 将 会 了 解 Ext JS 如 何 使 用 这 种 模式 。 

就 像 这 里 提 到 的 ， 数 据 是 单 页 Web 应 用 的 关键 ， 所 以 我 们 要 更 加 关注 它 是 如 何 提供 的 。 最 
好 的 API 是 为 一 个 目的 而 设计 的 ， 不 要 设计 一 个 通用 的 接口 去 发 送 一 大 堆 数据 以 备 应 用 可 能 
需 。API 应 该 发 送 那些 内 容 相 关 的 、 充 分 考虑 带宽 的 、 针 对 移动 端 优化 过 的 有 意义 的 、 目 标明 确 
的 数据 。 

根据 这 些 思想 ， 你 将 会 看 到 Ext JS 如 何 帮助 创建 一 个 优化 的 、 数 据 驱 动 的 、 单 页 的 应 用 。 下 
面 我 们 将 开始 讨论 架构 的 选择 。 


14.2 ”应 用 的 (基础 ) 结构 


让 我 们 将 Ext JS 应 用 程序 (application ) 看 作 一 个 应 用 (app ) 的 母 版 。 以 此 类 推 , 它 是 所 有 
组 件 被 放 入 的 地 方 。 母 版 利用 专 有 的 控制 器 来 建立 视图 、 数 据 、 用 户 交 互 行为 之 间 的 交流 通道 。 

应 用 程序 的 初始 建立 方式 会 影响 到 它 的 性 能 、 延 展 性 ,并 最 终 决 定 它 的 可 维护 性 。 我们 应 该 
遵循 规范 和 正确 的 原则 ， 这样 的 话 ， 即 使 是 在 做 一 个 小 型 项 目 , 我 们 也 能 做 得 很 好 ， 并且 也 会 在 
项 目 需 要 做 得 更 加 严谨 时 让 你 有 如 神助 。 放心 , 为 了 节省 时 间 而 快速 而 随意 地 实现 应 用 , 绝对 是 
通 往 失 败 的 “ 良 方 "。 你 不 可 能 回 退 并 且 重 构 应 用 ， 因 为 你 的 应 用 一 点 也 不 符合 规则 ， 并 且 是 危 
险 的 产品 级 别 软 件 。 

开发 应 用 的 最 基础 原则 之 一 是 合理 定义 类 。 请 确保 将 类 合理 定义 。 

你 差不多 已 经 可 以 使 用 Ext JS 4 的 所 有 特性 来 创建 一 个 应 用 程序 了 。 在 这 个 过 程 中 ， 我 们 将 
会 展示 很 多 有 用 的 编码 约定 , 首先 就 从 命名 空间 开始 讲 起 。 还 有 什么 步骤 可 以 排 在 给 伟大 的 产品 
命名 更 前 头 呢 ? 


14.2.1 在 命名 空间 内 进行 开发 


正如 稍 后 将 看 到 的 , 创建 一 个 应 用 程序 最 开始 就 有 给 应 用 命名 这 一 步 。 给 应 用 程序 命名 不 一 
定 是 营销 技巧 ， 而 是 之 后 所 有 开发 工作 的 基础 。 

你 也 许 已 经 熟悉 了 全 局 污染 ( global pollution ) 这 个 词 。 它 指 的 是 全 局 的 命名 空间 被 过 多 的 
引用 (变量 ) 填 满 了 。 很 常见 的 陷阱 就 是 在 写 应 用 的 时 候 使 用 了 全 局 变量 而 导致 的 命名 冲突 。 如 
果 在 不 同 的 代码 库 中 用 同一 个 变量 定义 了 两 个 引用 该 怎么 办 ? 你 要 因 调 试 做 晋 梦 了 。 正 因此 , 我 
们 总 是 鼓励 程序 员 去 定义 一 个 全 局 变量 命名 空间 , 去 创建 他 们 的 小 生态 系统 。 这 也 是 面向 对 象 编 
程 (OOP ) 思想 的 一 个 基本 原则 。 

一 个 浏览 器 环境 已 经 被 大 量 的 全 局 变量 污染 了 。 表 14-1 分 析 了 空白 网 页 应 用 在 一 些 现代 浏览 
器 中 的 被 声明 的 全 局 变量 。 
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表 14-1 about:blank 中 的 全 局 污染 





浏览 器 声明 的 变量 的 数量 
Google Chrome 23 559 
Apple Safari 6 517 
Mozilla Firefox 15 184 
Opera 11.64 74 
Internet Explorer 7 38 








在 已 经 声明 的 大 量变 量 中 , 你 最 不 想 做 的 事 就 是 重 写 变量 和 改变 整个 应 用 的 行为 。 此 外 ， 应 
用 程序 可 能 需要 访问 额外 的 API, 例如 地 图 接口 、 数 据 分 析 接 口 、 其 他 第 三 方 库 ,甚至 是 别 的 Ext 
JS 应 用 程序 。 

当 定 义 命名 空间 时 ， 应 保证 它 具 备 以 下 特点 。 
口 简洁 ”开发 者 喜欢 少 打字 ， 这 样 同样 可 以 减少 代码 库 的 尺寸 。 
口 独一无二 ”赋予 一 个 有 意义 的 名 字 ， 比 如 不 要 给 自己 的 应 用 直接 取 名 为 “App”。 

在 Ext JS 的 世界 里 ， 就 和 很 多 其 他 面向 结构 的 编程 框架 一 样 ， 设 计 类 名 的 时 候 需要 遵守 特定 
的 模式 。 在 本 书 中 ， 我 们 会 提 到 Namespace/Package/Class (NPC ) 模式 。 

命名 空间 是 应 用 程序 编码 开始 的 地 方 。 作 为 根 引用 , 应 用 程序 的 所 有 包 和 类 内 套 或 者 子 能 套 
在 它 下 面 。 理 想 情 况 下 ， 整 个 应 用 程序 仅 在 浏览 器 全 局 命名 空间 中 加 入 以 下 两 个 引用 。 

口 Ext JS 框架 类 。 
口 命名 空间 (例如 “App”) ”应 用 程序 的 类 。 

应 用 程序 的 MVC 代 码 ， 以 及 单 例 、 扩 展 或 者 其 他 任何 代码 ， 都 应 该 存在 于 命名 空间 之 下 
(图 14-1 )。 正 是 由 于 会 频繁 使 用 命名 空间 ， 所 以 通常 最 好 让 名 称 的 命名 少 于 4 个 字符 。 还 有 ， 要 
确保 名 称 有 意义 。 例 如 ， 取 名 叫 作 App 这 种 太一 般 化 的 名 称 会 让 人 不 知道 你 想 要 做 什么 ， 将 来 合 
并 一 些 项 目 文件 的 时 候 也 会 遇 到 代码 冲突 。 
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图 14-1 ”命名 空间 是 Ext JS 应 用 的 根 节点 
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如 图 14-2 所 示 ， 新 定义 的 类 会 形成 一 个 包含 以 下 信息 的 名 字 : 
(1) 应 用 程序 的 命名 空间 ( 驼峰 命名 法 ); 

(2) 包 名 称 (小写 、 单 数 ); 

(3) 类 名 称 (驼峰 命名 法 )。 


a View Viewport 


Namespace | | Package | Class Name 








pe A eh ee he 


图 14-2 ”命名 空间 、 包 、 类 模式 


应 用 程序 命名 空间 理所当然 只 有 一 个 。 然 而, 任何 应 用 都 有 大 量 的 类 , 并且 通常 有 成 千 上 百 
个 。 包 正 是 用 来 有 效 拆 分 这 些 代 码 的 好 方法 。 
包 最 棒 的 地 方 是 它们 可 以 互相 能 套 ， 如 图 14-3 中 展示 的 一 样 。 包 的 第 一 层 一 般 都 是 以 下 7 种 
选择 之 一 : 
口 Model 
口 View 
口 Controller 
DQ Store 
口 Ux 
口 Util 
口 Component 


下) CD) CR Ce 


Namespace | | Package | | Package | | Class Name 
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图 14-3” 山 套 的 包 


所 有 髓 套 更 深 的 包 应 该 反映 应 用 的 业务 逻辑 。 你 会 想 要 按照 逻辑 板块 来 切 分 应 用 , 它们 会 反 
映 应 用 程序 模块 、 子 模块 或 者 抽象 层次 。 

NPC 模 式 命名 约定 不 仅仅 涉及 命名 。 这 个 模式 也 定义 了 一 个 类 的 文件 和 文件 夹 结 构 。 这 是 Ext 
JS 4 最 有 价值 的 一 个 特性 ， 即 Ext.Loader 起 作用 的 地 方 。 


14.2.2 ”动态 依赖 加 载 
在 Ext JS 4 之 前 ， 我 们 需要 为 项 目 运行 需要 的 JavaScript 文 件 硬 编码 脚本 标记 ， 这 一 直 让 人 很 4 
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头疼 。 我 们 刻意 地 称 为 文件 而 不 是 类 ,因为 这 一 特殊 的 情境 阻碍 了 开发 人 员 将 每 一 个 类 分 别 写 到 
各 自 地 文件 中 去 。 在 这 种 情况 下 ， 一 个 较 大 的 应 用 程序 会 有 大 量 含 很 多 脚本 标记 的 HTML 文 件 。 
Ext JS 4 内 置 了 Ext.Loader, 这 个 有 用 的 特性 允许 自动 包含 依赖 关系 。 它 的 功能 有 如 下 两 方面 : 
口 在 需要 某 个 类 的 时 候 进 行 按 需 加 载 ; 
口 启动 运行 加 载 明 确定 义 的 依赖 关系 。 

根据 需要 加 载 类 ( 动态 加 载 ) 与 其 说 是 一 个 很 酷 的 特性 ， 还 不 如 说 更 像 一 个 灭火 器 ， 这 是 所 
有 应 用 程序 都 很 依赖 的 特性 。 它 会 侦查 应 用 程序 中 的 失败 情况 , 使 应 用 程序 知道 遗漏 了 哪些 必要 
的 类 ,并 同步 地 加 载 遗漏 的 类 文件 。 这 一 事件 还 会 报告 给 浏览 器 的 控制 台 , 使 你 可 以 返回 到 代码 
中 以 合理 设置 依赖 关系 。 

新 的 类 系统 提供 了 一 些 方法 ， 可 以 直接 或 者 间接 定义 依赖 关系 。 一 个 共同 点 是 ， 它 们 都 由 
Ext .define 配 置 。 让 我 们 来 看 看 。 

口 requires: 类 定义 需要 的 依赖 (阻塞 )。 

口 uses: 类 实例 化 需要 的 依赖 ( 非 阻塞 )。 

口 controllers: 应 用 程序 使 用 的 控制 器 。 
口 models: 控制 器 使 用 的 模型 。 

D views: 控制 器 使 用 的 视图 。 

口 stores: 控制 器 使 用 的 存储 。 

口 extend: 在 Ext .define 中 被 扩展 的 类 。 
口 override: 在 Ext .define 中 被 覆盖 的 类 。 

为 了 ExtLoader 可 以 加 载 依赖 关系 ， 需 要 合理 地 存储 类 文件 。 在 默认 情况 下 ， 加 载 器 会 将 类 
名 扩展 成 完整 形式 ， 以 点 来 分 隔 名 称 的 不 同 部 分 。 这 就 意味 着 每 个 包 会 成 为 一 个 子 文件 夹 ， 每 个 
类 名 会 被 看 作 一 个 以 .js 作为 后 级 的 文件 。 但 也 有 例外 ,最 上 面 一 层 包 ， 更 准确 地 说 就 是 你 的 命名 
空间 (在 图 14-4 例 子 中 是 survey ), 将 会 被 转换 成 预先 定义 的 文件 名 : app。 图 14-4 展 示 了 这 个 过 
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app view Viewport.js 
图 14-4 ”类 名 转换 成 文件 夹 和 文件 的 习惯 


牢记 这 些 原则 ,你 会 发 现 创 建 一 个 基本 文件 和 文件 夹 结 构 非 常 简 单 。 图 14-5 展 示 了 在 本 章 将 
创建 的 应 用 中 使 用 到 的 文件 结构 。 
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28 items, 22.8 GB available 


图 14-5 ”按照 命名 规范 定义 的 文件 和 文件 夹 结构 


打开 一 个 启用 了 ExtLoader 的 应 用 程序 需要 访问 Web 服 务 器 的 权限 。 因 为 它 利 用 了 XHR 
(Ajax ), 而 且 浏 览 咒 不 允许 XHR 对 本 地 的 文件 系统 的 请 求 。 但 是 有 一 个 小 技巧 可 以 让 浏览 器 即使 
在 没有 Web 服 务 器 的 情况 下 发 送 Ajax 请 求 , 这 就 是 打开 Google Chrome 浏 览 器 , 并 将 其 安全 防护 关 
闭 ， 同 时 打开 index.html 作 为 正常 的 本 地 文件 ， 这 样 就 搞定 了 。 








关于 关闭 Web 安 全 防护 的 警告 
关闭 Web 安 全 防护 , 浏览 器 会 很 容易 受到 恶意 脚本 攻击 。 我们 建议 只 在 应 用 程序 测试 和 调 
试 时 关闭 Web 安 全 防护 。 请 警惕 在 浏览 其 他 网 页 的 时 候 可 能 涉及 的 风险 。 


以 下 是 在 不 同 的 操作 系统 下 关闭 chrome 的 安全 防护 的 方法 。 
Windows( 命令 提示 符 ): 

chrome.exe -disable-web-security 

Mac OSX (终端 ): 

open -a Google\ Chrome - - args - - disable-web-security 
Linux (终端 ): 

chrome -disable-web-security 


我 们 会 在 之 后 创建 MVC 应 用 程序 的 时 候 深入 讨论 依赖 关系 。 但 是 在 那 之 前 ， 我 们 来 看 下 将 
要 做 的 应 用 程序 是 什么 样子 。 
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14.3 ”开启 Survey 应 用 





每 一 个 应 用 都 起 源 于 一 个 想法 ,然后 再 设计 一 系列 的 线 框图 。 在 本 章 接 下 来 的 内 容 中 ,你 会 
台 终 围绕 一 个 想法 ， 以 线 框图 为 基础 构建 一 个 应 用 程序 ， 然 后 测试 最 后 的 结果 。 
我 们 这 个 Survey 项 目的 想法 是 做 一 个 调查 传递 平台 , 此 处 将 之 称 为 “Survey”。 它 唯一 的 目的 


























就 是 为 经 过 身份 验证 的 的 用 户 展示 动态 生成 的 表单 、 扣 








你 需要 的 理解 的 概念 包括 : 
口 模型 和 存储 之 间 的 CRUD 操 作 ; 
口 通过 关联 进行 数据 传递 ; 

口 以 数据 为 基础 动态 生成 组 件 ; 
口 用 Sencha Cmd 打 包 。 











14.3.1 从 想法 到 代码 实现 











和 获 输入 ， 并 同步 数据 源 。 关 于 这 个 想法 ， 





Survey 是 一 个 数据 驱动 的 MVC 应 用 程序 。 我 们 花 点 儿 时 间 来 研究 它 的 工作 流 : 
(1) 用 户 需要 身份 验证 来 接受 可 应 用 的 调查 表 和 调查 数据 ; 





(2) 一 个 用 户 可 以 访问 一 条 及 以 上 的 调查 表 ; 
(3) 调查 问题 划分 成 逻辑 组 ; 
(4) 调查 问题 一 次 仅 在 一 组 中 出 现 ; 











(5) 用 户 可 以 根据 自己 的 需要 进入 调查 表 或 者 组 ; 
(6) 一 旦 有 新 数据 填 人 ， 输 入 数据 就 立即 被 保存 ; 


(7) 依据 从 服务 器 得 到 的 数据 动态 生成 表单 。 





依据 这 些 指导 方针 ， 你 会 创建 一 个 功能 全 面 的 应 用 程序 。 





而 且 , 你 会 有 大 量 的 领域 可 以 通过 

















新 特性 来 实践 并 提高 。 图 14-6 展 现 了 最 终 产品 。 








C projects/ExtjS n-Act 
Sections Custo' 
2 Your in 
Your informatior 4 
Ee 2 First name: 


Gender: Male 











图 14-6 ”Survey 应 上 











j 完 成 后 的 样 
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建立 用 户 界面 就 像 豪 饪 ， 你 花费 了 至 少 一 半 的 时 间 在 准备 ， 把 所 有 的 原料 和 和 餐具 集 在 一 起 ， 
当 要 使 用 的 时 候 随 手 一 拿 即 可 。 我 们 希望 你 已 经 迫不及待 要 开始 创建 这 个 应 用 程序 了 。 

在 开始 前 , 请 按照 图 14-7 所 示 的 步骤 一 一 11-SAW( 11-step Sencha Application Workflow ) 一 一 
一 步 一 步 操作 。 这 是 一 个 典型 的 开始 : 创建 一 些 文件 夹 和 文件 。 但 是 ， 如 果 我 们 说 不 需要 自己 手 
工 去 做 开始 的 三 个 步 又 ， 所 有 这 些 都 可 以 用 其 他 方式 自动 生成 呢 ? 你 应 该 猜 到 了 : Sencha Cmd 
可 以 帮 你 做 。 





























Sencha 应 用 程序 的 11 步 工作 流 















设置 控制 器 











车 
三 


7 7 





部 署 





图 14-7 11-SAW 流 程 图 


14.3.2 用 Sencha Cmd 加 快 开 始 的 步伐 
Sencha Cmd 是 一 组 命令 行 工具 ,目的 是 帮助 开发 者 快速 生成 一 个 应 用 ,添加 模型 ， 视 图 或 控 14 
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的 网 站 上 下 载 。 


为 了 充分 利用 Cmd， 你 需要 做 以 下 事情 : 




















制 器 ， 并 且 ， 最 重要 的 是 创建 定制 的 应 用 构建 。Sencha Cmd 不 是 框架 自 带 的 ， 所 以 要 从 Sencha 


(1) 下 载 和 安装 一 个 有 下 E (Java 运行 环境 ) 6 或 者 更 高 的 版 本 ; 
(2) 下 载 和 安装 Compass CSS 创 作 框 架 ( 以 及 根据 需要 下 载 其 他 的 相关 依赖 ， 例 如 Ruby ); 


(3) 下 载 和 安装 Sencha Cmd; 


(4) 下 载 和 提取 最 新 的 EXT JS SDK 包 ( 4.1.2 或 者 更 新 版 本 )。 


Sencha Cmd 版 本 


请 注意 Survey 应 用 程序 是 用 Sencha Cmd v4.0.0.203 构 建 的 。 用 其 他 版 本 的 Sencha Cmd 来 构 


建 的 话 ， 在 功能 和 配置 上 都 有 可 能 不 同 。 


你 需要 做 的 第 一 件 事情 就 是 生成 应 用 。 打 开 命 令 行 终端 ， 进 入 包含 EXT JS SDK 包 的 目录 。 


然后 ， 运 行 以 下 命令 : 


sencha generate app Survey /path/to/Survey 





这 是 此 刻 你 在 SDK 目 录 下 要 做 的 所 有 事 





情 。 你 可 以 导航 至 /path/to/Survey 这 个 路 径 下 (将 


/path/to/ 修 改 为 自己 电脑 上 实际 到 达 Survey 的 路 径 ， 但 是 请 确保 没有 把 自己 的 项 目 文件 夹 建 到 Ext 
JS SDK 目 录 中 去 )， 然 后 看 一 看 ( 参见 图 14-8 )。 





Vv 
>» 全 app 
bp workspace 
v app 
application.js 
controller 
外 Main.js 
四 Readme.md 
辐 model 
加 Readme.md 
加 Readme.md 


可 


可 


> | store 
v Dview 
四 Main,js 


加 Readme.md 
Viewport.js 
app.js 
app.json 
bootstrap.css 
bootstrap.js 
bootstrap.json 
>» | build 
build.xml 
> dl ext 
index.html 
bp j overrides 
pb [9 packages 
Readme.md 
> (a resources 
» 全] sass 


o 


[9 


Sencha Cmd metadata 
App configuration 
Workspace configuration 
MVC root 

Application definition 


The initial default controller 


Safe to delete with the first model 


The initial default view 


The initial default viewport 
Application initialization 
Application configuration 
Theme CSS redirection 
Dependency metadata 
Generated configuration data 

Build output directory 

Build initialization logic 

Ext JS SDK 


Automatically required overrides 
Sencha Cmd packages 
Empty readme file 

Media resources (e.g. images) 
Theming support 


图 14-8 ”Sencha 命令 行 生 成 项 目的 框架 
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在 图 14-8 中 可 以 看 到 ，Sencha Cmd 确 实 为 我 们 做 了 不 少 工作 。 
































口 复制 了 只 包含 必要 信息 的 Ext JS SDK 文 件 (不 复制 文档 和 示例 )。 

口 创建 一 个 功能 齐全 的 index.html 文 件 。 

口 创建 app.js， 它 是 应 用 引导 程序 的 基础 。 

D 创建 一 个 基本 的 MVC 框 架 。 

口 建立 SASS (语法 很 棒 的 样式 表 ) 主题 项 目 。 

口 创建 一 个 资源 文件 来， 用 来 存储 多 媒体 文件 ， 例 如 图 像 。 

口 创建 空 的 readme.md 文件 , 来 防止 文件 夹 在 某 些 代码 控制 管理 系统 中 消失 , 比如 GIT 系 统 。 
这 些 readme.md 可 以 随意 删除 ， 但 是 每 个 文件 夹 都 必须 有 一 个 这 样 的 文件 。 

口 建立 私有 的 、 隐 藏 的 元 数据 文件 来， 并 建立 一 些 自 动 生 成 的 配置 文件 。 这 些 文件 和 文件 





夹 会 以 注释 信息 来 说 明 是 否 可 以 人 为 修改 。 
生成 应 用 代码 的 好 处 不 仅仅 是 帮 你 省 下 这 部 分 工作 。 你 想 要 成 功 开发 应 用 程序 ,就 必须 遵守 
纪律 ， 并 且 能 够 严格 遵照 惯例 。 
你 在 开发 完 这 个 应 用 程序 后 将 会 具备 以 上 两 个 能 力 , 将 训练 有 素 地 行事 , 仅 在 对 自己 长 期 有 
益 的 情况 下 走 捷 径 。 无 论 在 哪里 ， 你 都 会 遵守 Sencha 的 应 用 开发 惯例 。 
现在 生成 了 一 些 内 容 , 让 我 们 看 看 能 用 它们 做 什么 。 接 下 来 , 我 们 过 一 遍 应 用 程序 的 初始 化 
文件 ， 并 且 判 断想 在 模型 中 使 用 哪些 数据 格式 。 





















































14.3.3 引导 Survey 项 目 


如 果 你 已 经 在 电脑 上 完成 了 以 上 步骤 , 并 且 已 经 生成 了 自己 的 应 用 了 , 那么 可 能 已 经 悄悄 看 
了 index.html ( 代码 清单 14-1 ) 和 自动 生成 的 JavaScript 文 件 。 我 们 鼓励 每 个 人 都 将 整个 流程 走 一 
遍 。 因 为 这 样 做 可 以 让 大 家 真正 明白 生成 的 应 用 到 底 包含 哪些 组 成 部 分 ,就 像 下 面 的 代码 清单 展 
示 的 那样 。 


代码 清单 14-1 生成 的 index.html 的 源 代 码 


<1DOCTYPE HTML> 
区 示 志 
ep J a 由。 Cmd 应 用 引导 标 








<head> 文档 类 型 


<meta charset="UTF-8"> i 

<title>Survey</title> 提供 默认 的 WN 

<!-—- <x-compile> --> CSS 表 单 指定 最 小 
<!-- <x-bootstrap> --> SDK 包 


<link rel="stylesheet" href="bootstrap.css"> 


<script src="ext/ext-dev.js"></script> 
BOript res "DootstraD eS/ SCGridtS 
<!-- </X-bootstrap> --> 
<script src="app.js"></script> Ext JS 依赖 映射 


<!-- </x-compile> --> 
</head> Cs 
<body></body> 应 用 程序 初始 化 


</html> 
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这 里 建立 新 Ext 应 用 程序 的 最 小 但 能 够 满足 现今 功能 需要 的 索引 页 面 。 你 将 首先 注意 到 
HTML5 文 档 类 型 @。 它 不 仪 仅 是 帮助 节省 了 一 些 字 节 ， 而 且 帮 助 Ext JS 充 分 利用 最 新 的 浏览 器 。 

Sencha Cmd 同 样 也 创建 了 一 些 注 释 语 句 ， 看 起 来 像 XML 中 的 起 始 和 终止 标记 ， 其 实 它们 就 
和 XML 中 的 这 些 标记 功能 一 样 。 隐 藏 在 注释 标记 中 的 <x-compile> 人 表示 这 块 区 域 包含 特殊 逻 
辑 , 并 且 应 在 命令 行 编译 阶段 被 修改 。 在 <x-bootstrap> 和 之 间 的 语句 定义 引导 Ext JS 时 需要 的 
CSS 和 JavaScript 文 件 。 

bootstrap.css 文 件 @ 重 定向 到 将 要 被 使 用 的 主题 。 这 个 文件 不 可 以 编辑 ， 且 应 该 是 自动 生成 
的 并 指向 主题 样式 的 CSS。Ext JS 通 过 ext-dev.js 文 件 @ 调 用 ， 加 载 SDK 最 基本 最 小 的 部 分 ， 其 他 
部 分 则 动态 加 载 。 动 态 加 载 的 依赖 关系 列表 在 bootstrap.js@ 中 ， 该 文件 也 是 自动 生成 的 ， 因 此 不 
要 手工 去 修改 它 。 目 前 为 止 , 浏览 器 知道 了 如 何 给 应 用 程序 添加 样式 和 SDK， 可 以 安全 地 调用 
app.js 了 。 

在 <x-compile> 中 的 代码 块 仅仅 在 开发 环境 中 才 有 效 。 本 章 的 后 面 我 们 将 会 讨论 根据 对 性 
能 的 考虑 ， 会 改变 这 一 代码 块 的 应 用 程序 构建 步 又 。 
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什么 是 压缩 ? 

互联 网 ,作为 一 个 数据 分 发 媒介 ， 能够 以 超出 预期 的 质量 提供 给 终端 用 户 使 用 ,减少 传输 
数据 量 可 以 加 快 信息 传输 , 减少 使 用 的 带宽 ,从 而 可 能 降低 顾客 的 上 网 花费 。 在 不 影响 功能 的 
前 提 下 ， 移 除 JavaScript 上 没有 必要 的 部 分 的 过 程 就 叫 压缩 。 这 些 没有 必要 的 部 分 有 空格 、 注 
释 、 换 行 符 等 ， 但 压缩 也 可 以 修改 引用 名 字 ， 甚 至 更 高 程度 的 修改 。 尽 管 压缩 过 的 代码 可 读 性 
差 ， 但 是 作为 密码 学 的 一 种 形式 ， 压 缩 并 不 会 由 此 变 得 让 人 迷茫 与 困惑 。 


对 我 们 而 言 ， 我 们 不 会 依赖 index.html， 因 为 它 不 在 Sencha Cmd app-generation 过 程 生成 的 内 
容 之 内 。index.html 为 Web 页 面 做 什么 ， 同 样 app.js 就 为 ExtJS 应 用 做 什么 。 它 是 执行 所 有 其 他 代码 
的 起 始点 。 让 我 们 来 看 看 应 用 是 如 何 通 过 以 下 代码 被 引导 的 。 


代码 清单 14-2 ”生成 的 app.js 源 代码 























Ext .application(t{ A 
器 ZS Fr: 
name: 'Survey', 应 用 程序 初始 化 应 用 程序 和 命名 空间 名 
extend: 'Survey.Application', 
autoCreateViewport: true 从 Survey .Application 
7 加 立即 吕 示 视 0 中 继承 











Ext .application@ 是 一 个 特殊 的 方法 调用 ， 它 只 是 加 载 Survey .Application@@ 类 及 其 
依赖 并 初始 化 它 。 它 同样 熟知 应 用 程序 的 命名 空间 @, 以 帮助 识别 哪些 类 可 以 在 需要 的 时 候 动态 
加 载 。 

这 是 复习 图 14-4 的 好 时 机 ， 在 那里 我 们 讨论 了 如 何 将 依赖 关系 转化 成 动态 加 载 需要 的 路 径 。 
为 我 们 说 过 应 用 的 命名 空间 是 Survey ，Ext.Loader 知道 survey.Application 位 
于 ./app/Application.js 文 件 中 。 

当 所 有 JavaScript 被 加 载 进来 ， 并 昌文 档 已 经 就 绪 ，Ext 就 将 自动 地 创建 视 口 @。 在 进入 视 口 
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地 讨论 前 ， 我 们 看 看 如 何在 Survey .Application 类 中 配置 应 用 程序 。 
代码 清单 14-3 ”应 用 程序 定义 


Ext .define('Survey.Application', { 





name: 'Survey', 

| 9 ats (em) 
extend: 'Ext.app.Application', 
views: [ 


// 待 办 : 在 此 处 添加 视图 


]， 局 vc 人 用 


controllers: [ P| 


// 待 办 : 在 此 处 添加 控制 器 





] ， 








“77 等 办 ， 在 呈 处 汪 加 在 人 
二 说 
Survey .Application 类 是 Ext .app.Application 类 的 一 个 自然 的 扩展 , 它 赋 予 应 用 程序 
模型 、 视 图 、 控 制 器 和 存储 。 应 用 程序 使 用 Ext .Loader 来 加 载 需 要 的 文件 ， 执 行 它 们 ， 并 且 分 
别 根据 它们 各 自 的 功能 注册 它们 。 
Ext .app.Application 扩 展 了 Ext .app.Controller, 所 以 Ext .app.Application 也 是 
一 个 基本 的 控制 器 。 这 两 个 类 的 几乎 所 有 配置 选项 都 一 样 ， 只 有 name 属 性 不 同 。 继 续 看 下 去 ， 
本 书 将 会 告诉 你 更 多 关于 控制 器 的 事情 。 
你 会 在 代码 清单 14-3 中 发 现 两 点 我 们 已 经 知道 的 事情 。 
口 name 属性 @ 在 survey .Application 和 Ext .application 调 用 中 被 重复 声明 ( 代码 清 
单 14-2 )。 这 更 多 是 站 在 组 织 代码 的 角度 考虑 ， 而 不 是 为 了 功能 上 的 考虑 。Survey . 
Application 定 义 中 完全 可 以 忽略 这 一 要 求 ,但 是 Ext .application 调 用 中 名 称 属性 声 















































i 





























明 是 必要 的 。 
口 模型 在 生成 的 类 中 没有 被 列 出 介 。 不 过 ， 应 用 程序 需要 知道 它们 ， 你 在 之 后 过 程 中 会 把 
它们 加 进去 。 





你 会 在 这 个 类 中 加 入 模型 、 控 制 器 和 存储 。 只 要 视图 、 模 型 和 存储 在 应 用 中 是 全 局 性 的 ,或 
者 在 应 用 程序 的 不 同 部 分 (模块 ) 之 间 被 共享 ， 它 们 就 要 被 列 出 来 。 既 然 这样 ， 就 把 视图 和 存储 
绑 定 到 相应 的 控制 器 配置 中 去 ， 以 便 生成 更 加 结构 化 和 模块 化 的 应 用 程序 。 
视 口 
有 一 种 视图 与 众 不 同 ， 即 应 用 程序 视 口 。 视 口 是 应 用 程序 中 所 有 视图 的 关键 点 。 视 口 窗 之 于 
单 页 Web 应 用 犹如 <body> 之 于 HTML 元 素 。 视 口 常 常 带 有 核心 的 导航 元 素 以 及 通知 控制 台 , 它 就 
像 应 用 程序 的 所 有 主要 视图 的 支架 。 一 个 页 面 只 可 以 有 一 个 视 口 。 
如 代码 清单 14-2 所 示 ， 当 文档 准备 就 绪 可 以 进行 DOM 操 作 时 ， 视 口 就 会 被 自动 创建 。Ext JS 
会 自动 搜索 view.Viewport 类 。 在 这 个 例子 中 是 survey.view.Viewport 类 。 所 以 ， 让 我 们 一 4 
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起 写 这 个 类 。 

在 写 代码 之 前 , 请 先 花 一 点 儿 时 间 考 虑 一 下 你 想 获得 什么 。 回 头 看 看 应 用 程序 需求 ,你 会 想 
起 只 有 注册 用 户 可 以 访问 Survey， 这 意味 着 需要 提供 注册 表单 。 由 于 登录 了 的 用 户 在 某 些 情况 下 
会 想 要 退出 ， 因 此 请 为 视 口 设计 卡片 布局 ， 以 加 快 注册 表单 页 和 回 退 的 页 面 之 间 的 切换 。 下 面 是 
创建 视 口 的 代码 〈 这 仅仅 是 一 个 存根 )。 


代码 清单 14-4” 视 口 存根 




















Ext .define('Survey.view.Viewport', { 
extend : 'Ext.container.Viewport', 
alias : 'widget.vp', 


layout : { 
type : 'card' 
上 
用。 





























通常 情况 下 viewport 是 对 Ext .container.Viewport 类 的 扩展 , 这 是 一 个 特殊 的 类 , 它 自 
动 地 占用 了 文档 体 全 部 可 用 的 长 度 和 宽度 。 这 样 的 视 口 不 允许 滚动 , 组 件 如 果 想 要 滚动 效果 的 话 
需要 自行 开启 。 最 后 ， 为 了 将 来 方便 访问 你 需要 设 定 ve 作为 XType， 并 且 将 布局 设置 为 'carq'。 


























注意 Sencha Cmd 已 经 创建 了 这 个 文件 的 一 个 示例 , 你 可 以 在 代码 清单 14-3 的 基础 上 修改 , 而 不 
必 自 己 重 头 创建 。 另 一 个 自动 生成 的 视图 在 Main.js 里 ， 你 可 以 安全 地 删除 它 ， 因 为 不 会 
用 到 它 。 





在 完成 了 11-SAW 的 4 步 之 后 ， 让 我 们 检查 下 目前 的 成 果 ， 并 为 下 一 步骤 ( 即 数据 建 模 ) 做 
准备 。 


14.3.4 数据 驱动 的 应 用 程序 模型 


如 果 在 浏览 器 中 运行 目前 的 应 用 程序 , 你 只 会 看 到 一 个 空白 的 页 面 。 这 是 一 个 好 的 信号 ， 
为 它 意味 着 已 经 可 在 建立 数据 模型 后 设计 视图 了 。 毕 竟 ， 你 将 设计 一 个 数据 驱动 的 应 用 程序 。 
在 这 里 ，11-SAW 过 程 指示 你 来 定义 模型 。 考 虑 下 这 个 问题 ， 之 前 预期 想 要 的 数据 模型 是 怎 
样 的 ? 很 明显 ， 你 会 需要 一 个 Survey 列 表 ， 因 此 还 要 定义 Survey 的 外 观 。 此 外 ，Survey 是 由 一 个 
一 个 的 问题 组 成 , 这 意味 着 还 需要 一 个 模型 用 来 定义 问题 。 并 且 问 题 是 分 组 的 ,你 还 要 定义 不 同 
的 组 。 以 上 这 个 简短 的 头脑 风暴 揭示 了 模型 会 有 : 
口 Survey 
口 Group (组 ) 
口 Question (问题 ) 
在 卷 起 袖子 干 活 前 , 再 花 点 儿 时 间 思 考 一 下 。 你 只 有 触及 一 个 想法 的 本 质 时 , 才 可 能 以 最 简洁 
的 方式 去 创造 。 你 将 要 建立 的 模型 都 会 和 另外 一 个 连接 起 来 。 一 个 Survey 中 包含 各 种 组 ， 每 个 组 有 
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一 个 或 者 更 多 的 问题 。 因为 它们 被 很 好 地 连接 起 来 , 为 什么 不 使 用 个 模型 关联 呢 ? 当 你 想 要 一 次 性 
下 载 所 有 数据 ， 并 且 由 最 顶层 的 模型 将 数据 项 分 别 推送 到 相应 的 模型 时 ， 关 联 会 很 有 帮助 。 

乍 一 听 起 来 觉得 有 点 含糊 。 在 下 面 的 代码 清单 中 , 会 创建 一 个 数据 对 象 的 样本 ， 帮 助 你 获得 
清晰 的 认识 。 


代码 清单 14-5 期望 的 数据 对 象 





id a 
name : 'Sample Survey', 人 添加 关联 键 
groups [ 
( 

id i i 

name : 'Sample Group', 

survey_iqd : 1, 

questions : [ Oa 


( 
id 5 
survey_id : 1, 
group _ id. 3 11; 
question : 'Sample Question', 


config 3 引 
xtype : 'textarea' 配置 问题 字段 
} 


} 
] 


在 只 有 20 行 的 代码 中 ， 你 可 以 知道 关于 数据 的 很 多 东西 。Surveys 会 直接 展示 它 所 得 到 的 数 
据 ， 你 所 需要 的 仅仅 是 一 个 名 称 和 识别 码 。Survey 带 有 特殊 的 属性 ， 即 groups@，, 该 属性 代表 
了 问题 组 的 一 个 数组 。 这 也 是 我 们 知道 的 has many 关 联 关系 。 

组 是 简单 的 。 每 个 组 都 有 男 一 个 特殊 的 属性 ， 即 survey_igd@。 这 个 属性 用 来 将 组 和 它 对 应 
的 Survey 关 联 起 来 , 相当 于 一 个 数据 库 外 键 的 概念 。 和 Survey 一 样 ,， group 也 和 question 有 has many 
关联 关系 。 

问题 则 有 点 复杂 了 ， 它 具有 配置 一 块 区域 所 需要 的 所 有 属性 。 注 意 ，config 属 性 全 在 
Ext .field.Field 类 和 其 子 类 中 几乎 可 以 接受 任何 配置 属性 。 

下 一 步 ， 我 们 来 看 如 何 设置 每 个 模型 和 它们 各 自 的 存储 。 


14.3.5 ”给 应 用 程序 增加 模型 


Survey 模 型 仅 由 两 个 字段 组 成 : 
D iqd 


D name 
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除了 建立 字段 ， 


代码 清单 14-6 ”Survey 模型 
Ext .definel(' 
extend : 


requires : [ 


还 需要 定义 关联 关系 和 数据 代理 


SurVey .model .SurVey 
'Ext .data.Model', 


HH 


最 终 代 码 如 代码 清单 14-6 所 示 。 





o 


大 宛 


'Ext .data.association.HasMany' 


i 


uses : [ 
'Survey .model .Group 


] ， 


associations : [ 
{ 
type 
model 
primaryKey 
foreignKey 
autoLoad 
associationKey : 
name 
} 
de 
BoOxy: 23° 
type 'ajax', 
sea 'data.json', 
reader : { 
type : 'json' 
} 
}, 
fields [ 
{ 
name Td 
}, 
{ 
name : 'name' 


Survey 和 Group 是 有 关联 的 ， 因 此 必须 让 类 知道 它 依 赖 于 model .croup 类 @， 


Se 人 添加 相关 模型 
Ep 填充 组 


'hasMany', 
'Survey .model .Group', 
We 


'survey_id', 
2 
"EOUDS 
'groups' 


| 列 出 组 数据 
Da 


Ss bd 添加 代理 配置 


设置 字段 列表 


一 个 Survey 可 





以 拥有 很 多 个 组 ， 这 意味 着 它 有 hasMany 关 联 关系 @。 在 关联 配置 里 ， 使 用 associationKey 


属性 全 来 帮助 自动 分 组 。 组 会 存在 于 
并 且 用 name 配 置 来 监听 。 当 将 这 
建立 关联 可 








全 bb 月 .2z 


甩 息 契 


二 


可 


疝 


nl 











性 组 中 。 最 终 ， 可 以 通过 groups 方 法 @ 调 用 来 访问 组 ， 
文 个 模型 类 搬入 视图 ， 就 可 以 返 
义 Survey 模 型 时 工作 强度 最 大 的 部 分 。 下 面 建立 一 个 代理 四， 这 样 一 个 
Moae1l 实 例 知 道 存储 应 该 从 哪里 获取 数据 以 及 如 何 完成 剩 下 的 CRUD 操 作 。 你 不 


回 到 这 个 模型 类 了 。 








用 在 配置 存储 的 
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时 候 重 复 建立 代理 ， 因 为 它 会 自动 被 共享 。 最后， 用 需要 的 字段 名 简单 地 配置 一 下 fieldsO 
即 可 。 

Survey.model .Survey 现 在 能 够 知道 Survey 从 哪里 来 及 如 何 辨 识 其 中 的 字段 了 。 并 且 , 它 
也 知道 了 分 组 需要 通过 男 一 个 模型 来 处 理 ， 即 Survey .model .Group。 

Group 模型 ( 代码 清单 14-7 ) 非常 像 Survey, 但 有 两 个 主要 的 不 同 之 处 : 
口 不 和 服务 需 交 互 ; 
口 它 从 Survey 模 型 接受 数据 ， 并 推送 问题 到 Question 模 型 ， 因 此 它 上 具有 belongsTo 和 

hasMany 关 联 关 系 。 


代码 清单 14-7 ”Group 模型 
Ext .define('Survey.model.Group', { 
extend : 'Ext.data.Model', 














requires : | 
'Ext .data.association.HasMany', 
'Ext .data.association.BelongsTo' 
ls 


uses : [ 
'Survey .model .Survey', 
'Survey .model .Question' 


fields : [ 
{ 
name : 'id' 
了 
{ 
name : 'survey_id' 
J 
{ 
name : 'name' 
{ 
name : 'index' 
} 
]， 
associations : [ 确认 与 Survey 
{ 模型 的 关联 
type : 'belongsTo', 
model : 'Survey.model.Survey', 
primaryKey : 'id', 
foreignKey : 'survey_id' 
La 
{ 
type 'hasMany', 
model : ‘Survey..model..Question', 0 添加 hasMany 关 联 
primaryKey 生生 





- 立 - 、 
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foreignKey Ce elon oe We 
autoLoad : true, 
associationKey : 'gquestions', 
name 'Guestions 


}); 














memory 配置 存储 代理 


由 于 Survey 和 Group 关联 ,后 者 需要 设置 belongsTo 到 Survey 上 的 关联 @@。Group 表 现 得 像 一 


个 中 间 媒 介 一 样 ， 它 从 Survey 接 受 数据 ， 然 后 转发 一 些 给 Question。 因 此 ，Question 和 Group 有 了 
has any 关 联 关 系 @。 




















Group 都 是 只 读 的 。 它 们 也 从 其 他 模型 中 接受 数据 , 正 因 此 我 们 要 设置 proxy 为 内 存 类 型 加 。 


我 们 必须 设置 一 个 代理 。 

















最 终 的 模型 已 经 一 目 了 然 , 如 下 面 的 代码 清单 所 示 。 你 需要 建立 字段 和 一 个 pelongsTo 关 联 ， 





将 问题 和 组 连 


代码 清单 14-8 ”Question 模型 


Ext .define('Survey.model.Question', { 


extend : 


requires : [ 
'Ext .data.association.BelongsTo' 


] ， 


USeS : 


'Ext .data.Model', 


'Survey .model .Group 


fields ;: [ 


] ， 


二 


name : 


name : 


TSUNe 3 


name : 


belongsTo : 


[ 


"idaq' 


rgroump id 


'question' 


"anSwer ' 


"GONnfig" 
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model : 'Survey.model .Group ' ， 
foreignKey : 'group_id' 
} 
]， 
proxy { 
type : "Inemory 





Question 模 型 负责 动态 表单 的 生成 。 因 此 ， 它 本 质 上 由 决定 生成 字段 的 配置 信息 属性 组 成 。 
question 属 性 包含 问题 标签 ， 要 把 它 作 为 Ext .field.Field 子 类 的 fielgdLabel 属 性 来 使 用 。 
与 此 类 似 ，answer 属 性 包含 一 个 新 记录 的 值 ， 甚 至 可 以 从 服务 器 上 抓 取 一 个 以 前 保存 的 记录 。 
其 他 配置 参数 包括 xtype， 都 可 以 在 config 字 段 中 来 指定 。 

模型 在 数据 处 理 上 做 了 很 多 苦力 活 。 它 们 表示 了 数据 及 其 字段 的 集合 , 并 能 够 标准 化 和 验证 
绑 定 到 它们 身上 的 数据 , 还 知道 如 何 通过 关联 关系 连接 其 他 的 模型 。 但 是 模型 仅仅 表示 单一 的 数 
据 定义 ， 还 需要 为 所 有 的 Model 实 例 建立 一 个 仓库 存储 。 


14.3.6 ”添加 数据 存储 


所 有 这 三 个 数据 存储 都 映射 到 同样 的 定义 , 这 归功 于 各 自 模型 的 详尽 设置 。 让 我 们 在 下 面 的 
代码 清单 中 看 看 存储 。 


代码 清单 14-9 ”Surveys 存 储 












































Ext .define('Survey.store.Surveys', { 
extend : 'Ext.data.sSstore', 
requires : | 


'Survey .model .SurVvey 


] ， 


storeld : 'Surveys', 
autoLoad : true, 
model : ' Survey .mode] .SurVvey 


3 

现在 你 应 该 熟悉 了 数据 存储 的 工作 原理 。 这 个 例子 引用 了 模型 名 称 和 使 得 从 视图 中 引用 存储 
变 得 更 容易 的 storeId, 你 只 需要 指定 一 个 视图 到 storeIgd, 然后 视图 组 件 就 能 在 必要 的 情况 下 
实例 化 存储 了 ， 否 则 它 就 会 重用 已 经 存在 的 实例 。 





命名 约定 注意 事项 
模型 定义 了 单条 记录 的 配置 ,而 存储 定义 了 一 系列 Model 实 例 的 配置 。 因此， 模型 通常 用 
单数 命名 而 存储 用 复数 ， 比 如 Survey .model.Survey 和 Survey .store.Surveys。 
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定义 数据 结构 是 很 困难 的 事情 。 这 需要 在 前 期 的 架构 设计 中 计划 好 ， 并 在 开发 之 前 就 早早 
地 做 一 些 重大 的 决定 。 选 择 正 确 的 数据 模型 会 影响 客户 端的 性 能 、 人 带宽 消耗 ， 并 最 终 关 系 到 用 
户 体验 。 

一 般 来 说 ,服务器 端的 限制 会 影响 到 客户 端的 数据 模型 。 比 如 ,服务 器 管理 员 可 能 仪 有 有 限 
的 资源 来 格式 化 现存 的 API， 以 发 送 Ext JS 应 用 程序 所 需要 的 数据 来 工作 。 在 这 种 情形 下 ， 确 保 
折 中 的 方案 对 客户 问 的 负面 影响 最 小 。 在 我 们 的 例子 中 ,服务 絮 管 理 员 应 该 努力 扔 掉 数 据 对 象 不 
必要 的 部 分 ， 并 格式 化 为 JSON 而 不 是 XML ， 使 用 压缩 ， 减 少 递归 ， 并 使 用 任何 其 他 有 益 于 客户 
端的 技巧 。 客 户 端 计 算 机 可 能 比 服务 端的 弱 ， 但 是 你 不 愿意 让 用 户 感觉 到 任何 延迟 。 

我 们 对 11-SAW 的 学 习 已 经 过 半 ， 你 已 经 取得 了 很 大 进步 。 你 会 继续 构建 视图 和 控制 器 ， 然 
后 就 可 以 在 浏览 右上 跟踪 进度 了 。 
































14.3.7 创建 验证 表单 


Survey 应 用 的 登录 页 面 是 验证 表单 。 它 的 目标 是 让 用 户 输 入 凭据 ， 并 允许 他 们 去 调查 选择 页 
面 。 这 个 视 口 是 一 个 卡片 布局 容器 , 所 以 可 以 将 验证 表单 ( 见 图 14-9 ) 作为 视图 的 第 一 个 子 节点 。 
一 旦 用 户 成 功 登录 ， 视 口 就 会 切换 到 第 二 个 卡片 ， 即 “调查 名 单 ” 上 。 


Log in 














Email; 
Password : 


Login 


图 14-9 ”验证 表单 设计 
验证 表单 将 被 置 于 页 面 的 中 间 。 让 我 们 看 一 下 视图 的 详细 信 ， 
口 它 在 屏幕 上 居中 位 置 ; 

口 字段 被 封装 在 字段 集 组件 内 ; 

口 字段 锚 定 在 1009%; 

口 登录 按钮 横 跨 了 整个 可 用 宽度 。 

下 面 的 代码 清单 可 以 让 你 好 好 复习 下 表单 和 布局 的 工作 原理 。 


代码 清单 14-10 ”验证 视图 








证 











Ext .define('Survey.view.AuthorizationForm', { 
extend : 'Ext.form.Panel', 
alias : 'widget.authform', 
requires: [ 


'Ext .form.field.Text', 
'Ext .form.FieldSet', 
'Ext .Button’ 

六 


layout ww 挝 
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“Center 
pack : 'center', 
type : 'hbox' 


items : [ 


xtype : 'fieldset', 
width : 300, 
title : 'Log in', 
items : [ 
{ 
xtype 
anchor 


fieldLabel : 


xtype 
anchor 
inputType 


fieldLabel : 


xtype 
anchor 
itemId 
text 


] 
}); 


= 居中 字段 集 
9 添加 字段 集 


textfield,. 
'100%', 
'Email' 


"textfield'. 
'100%', 
'password', 
'Password' 


"battorn” » 
"100%", 
"TOgTiBtinr ; 
'Log in' 











证 用 的 电子 邮件 和 密码 的 字段 。 和 确认 按钮 一 样 ， 它 们 被 锚 定 至 100% 的 可 用 宽度 。 


友情 提示 


如 果 把 布局 从 VBox 改 成 HBox,， 会 有 什么 影响 呢 ? 


下 面 的 代码 清单 给 主 视 口 添加 了 一 个 代表 保护 区 域 的 空 组 件 。 


代码 清单 14-11 ”添加 表单 到 视 口 
items : [ 
{ 
xtype : 'authform' 
} 
{ 
xtype : 'component', 


html : 'Protected area' 


VBox 布 局 @ 保 证 了 项 目 既 是 垂直 居中 的 , 又 是 水 平 居 中 的 。fieldset@ 包 括 了 用 来 输入 验 
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添加 代码 清单 14-11 的 代码 到 survey .view.Viewport。 第 一 张 卡片 是 验证 表单 ， 将 在 视 品 
可 见 之 后 默认 显示 。 第 二 张 卡片 是 受 保护 区 域 组 件 ， 它 要 在 验证 成 功 之 后 才 出 现 。 

注意 ， 受 保护 视图 是 另 一 个 不 需要 进一步 应 用 验证 机 制 的 卡片 。 亚 意 用 户 很 容易 更 换 活 跃 
的 卡片 。 安 全 处 理 过 程 因 应 用 程序 而 异 ， 所 以 我 们 不 在 这 里 讨论 它 ， 但 是 对 于 这 一 点 要 做 到 心 
中 有 数 。 

你 将 很 快 能 在 浏览 需 上 看 到 变化 。 下 一 步 是 创建 第 一 个 控制 器 , 它 会 监听 提交 按钮 的 点 击 事 
件 ， 并 处 理 验证 逻辑 ， 最 终 展 示 受 保护 的 数据 。 


14.3.8 插入 第 一 个 控制 器 


控制 器 的 主要 目的 是 建立 视图 、 数 据 和 用 户 交 互 之 间 的 通信 通道 。 控制 器 是 基于 事件 开发 流 
程 的 一 个 重要 元 素 。 它 们 捕获 组 件 触 发 的 事件 ,并 与 它们 合作 来 确保 流畅 的 用 户 体 验 。 控 制 器 把 
视图 、 模 型 、 存 储 和 应 用 作为 4 个 主要 的 交互 源 和 目标 。 此 外 ，Application 是 Controller 的 
子 类 。 两 者 之 间 最 明显 的 区 别 在 于 ， 控 制 器 不 能 实例 化 其 他 控制 器 。 这 受到 Application 的 规 
则 影响 。 下 面 的 代码 清单 很 好 地 展示 了 控制 器 的 通常 使 用 方法 。 


代码 清单 14-12 Authentication 控制 器 


Ext .define('Survey.controller.Authentication', { 




























































































NS: 

























































































extend : 'Ext.app.Controller', 
views : [ 配置 视图 
'AuthorizationForm' 
hy 
init : function (application) { 
this.control({ Be 创建 点 击 处 理 程序 
"attontilooinBtn. :7 1 


click : this.onLoginClick 
} 
> 
多 


onLoginClick : function (button) { 


button.up('vp') .getLayout () .setActiveItem(1); 
} 
全 


虽然 控制 器 能 够 指定 视图 、 模 型 和 存储 作为 它 的 依赖 项 , 但 是 在 这 个 例子 中 只 需要 指定 一 个 
视图 @， 即 验证 表单 。 控 制 器 应 该 只 指定 它们 真正 控制 的 依赖 ,因此 不 需要 进一步 指定 任何 其 他 
的 视图 。 

开发 人 员 常常 不 知道 一 个 控制 希 包 含 了 哪些 模型 、 视 图 和 存储 。 经 验 法 则 表明 ,你 应 该 把 它 
们 看 作 有 意义 的 、 自 给 自足 的 包 。 你 只 需要 指定 那些 控制 器 离开 了 就 没 法 工作 的 类 。 

正如 Ext .Component 有 initcomponent 方 法 , 控制 器 也 有 对 应 的 init 方 法 。 它 最 常 被 用 来 
执行 控制 器 的 control 方 法 。 与 组 件 上 的 addListener 方 法 类 似 ，control 方 法 负责 找到 和 查 
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询 的 组 件 匹 配 的 所 有 组 件 ， 并 给 它们 分 配 一 个 监听 器 @@。 因 为 控制 需 在 视图 之 前 被 实例 化 , 所 以 
控制 絮 可 以 很 智能 地 和 将 来 要 实例 化 的 组 件 一 起 工作 。 
事件 处 理 程序 经 常 在 控制 器 内 定义 。 按 照 惯例 , 所 有 由 组 件 触发 的 事件 都 应 该 把 触发 了 的 实 
例 作 为 第 一 个 参数 传递 给 监听 回调 方法 。 因此, 位 于 控制 器 内 的 回调 方法 会 有 一 个 简单 的 方式 来 
访问 该 组 件 的 实例 引用 。 

简单 起 见 ， 这 一 特定 的 组 件 剥 离 了 现实 生活 中 的 验证 流程 。 使 用 目前 的 功能 ,用 户 能 够 输入 
他 们 的 电子 邮件 和 密码 并 点 击 提交 按钮 , 控制 器 会 把 它们 发 送 到 主 视 口中 的 下 一 张 卡片 上 去 。 你 
现在 应 该 去 创建 这 个 应 用 程序 中 的 其 他 视图 和 控制 器 了 。 






































14.3.9 Survey 视图 


你 现在 已 经 熟悉 了 ExtJS 中 的 MVC 流 程 了 ， 接 下 来 要 为 剩余 的 类 创建 视图 和 控制 器 定义 。 视 
图 将 会 相当 简单 ， 然 而 控制 器 要 用 到 一 些 额外 的 业务 逻辑 来 使 之 工作 。 
为 了 展示 Survey 应 用 的 剩余 部 分 ， 你 需要 三 个 视图 类 型 。 
口 调查 列表 : 可 用 调查 的 列表 。 
口 组 列表 : 选中 的 调查 的 可 用 组 的 列表 。 
口 问题 表单 : 装载 动态 创建 的 调查 表单 字段 。 
下 面 的 代码 清单 包含 了 Survey 视 图 的 代码 。 


代码 清单 14-13 ”Survey 视 图 














Ext .define('Survey.view.SurveyList', { 
extend : 'Ext.grid.Panel', 添加 调查 列表 
alias : 'widget.surveylist', 
title : 'Surveys', 
columnLines : false, 
store : 'Surveys', 
cls : 'Ssurveylist', 
0 隐藏 网 格 面板 标题 和 
columns : [ 
xtype : 'gridcolumn', 
flex 2 于 
dataIndex : 'name', 
text : 'Surveys' 
} 
] 
} 
Ext .define('Survey .view.GroupList', { 
exbene : EE OTL Pansl 下 » 定义 GroupList 视图 
alias : 'widget.grouplist', 
title : 'Sections', 
columnLines : true, 
store : 'Groups', 





cls ?SPOUBLLSt, 
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columns : [ 
{ 
flex by 
dataIndex : 'name', 
text 'Section' 
}, 
{ 
Xtype : 'numbercolumn', 
Width :50 计算 问题 数 
text se 
renderer : function (value, meta, record) { 
return record.questions() .getCount () ; 
} 
} 
] 
全 
Ext .define('Survey.view.QuestionsForm', { 
extend : 'Ext.form.Panel', “1 定义 ouestionForm 类 
alias 'widget .gquestions', 
requires : [ 
'Ext .form.field.Checkbox', 
'Ext .form.field.ComboBox', 规定 所 有 字段 类 型 
'EXtL .form.field.Date'， 
'Ext .form.field.Display', 
'Ext .form.field.Hidden', 
'Ext .form.field.HtmlEditor', 
'Ext .form.field.Number', 
'Ext .form.field.Picker', 
'Ext .form.field.Radio', 
'Ext .form.field.Spinner', 
'Ext .form.field.Text', 
'Ext .form.field.TextArea', 
'Ext .form.field.Time', 
'Ext .form.RadioGroup', 
'Ext .form.CheckboxGroup 
hy 
layout “ 
type : 'vbox', i 将 所 有 子 项 居中 
align : 'center' 


各 这 





为 了 显示 可 用 的 调查 列表 , 这 里 使 用 了 带 有 单列 的 网 格 面 板 @。 因 为 只 需要 显示 名 字 , 不 需 





要 标题 行 , 所 以 把 


并 且 标 题 相 关 的 处 理 不 会 消失 不 在 。 




















心 > 林 
已 禁 











了 合 。 坦率 地 说 , 通过 CSS 隐 藏 标题 行 来 移 除 它 的 。 它 们 已 然 是 存在 的 ， 








接 下 来 是 Groups 列 表 组 件 人 @， 它 也 是 个 简单 的 网 格 面板 ， 和 Survey 列 表 类 似 。Groups 列 表 有 
一 个 额外 的 列 ， 它 填充 了 一 个 组 中 的 问题 数量 的 数据 。 获 取 数 字 的 方式 很 有 趣 : 通过 关联 关系 来 


访问 一 个 组 的 问题 。 调 用 关联 关系 会 产生 一 个 加 载 了 相应 记录 的 store 实 例 。 可 以 使 用 
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Ext .data.Store 类 上 的 一 个 成 员 方 法 getCcount ()@ 来 计算 。 





hasMany 关 联 关系 存储 何 时 被 创建 ? 

当 访 问 一 个 Model 实 例 的 (也 叫 作 记录 的 ) hasMany 关 联 的 数据 ， 正 如 代码 清单 14-13 所 
示 ，Ext JS 会 创建 一 个 Ext .data.AbstractStore 实 例 ， 该 实例 是 Ext .data.Store 的 简化 
版 本 。 这 个 实例 会 和 记录 一 起 保留 在 缓存 中 供 将 来 使 用 ， 但 是 也 会 和 它 一 起 被 销毁 。 








更 为 简单 的 是 ， QuestionForm@@ 用 作 最 终 会 被 演 染 进来 的 所 有 问题 @ 的 父 容器 。 我 们 计划 
在 问题 组 下 面 添加 一 个 按钮 , 以 便 更 容易 导航 到 下 一 个 组 , 或 者 最 终结 束 调查 。 为 了 使 它 更 美观 ， 
该 按钮 会 被 水 平 居 中 显示 到 屏幕 上 。 设 置 布局 类 型 为 vbox， 并 把 它 对 齐 到 中 心 @， 是 可 以 达到 
所 需 效 果 的 一 种 简单 方式 。 问 题 会 伸展 以 占据 整个 可 用 宽度 。 这 一 部 分 会 由 控制 器 动态 完成 , 我 
们 将 会 在 下 面 讲 到 。 

更 新 视 口 
现在 需要 为 所 有 新 定义 的 视图 创造 一 个 “家 ”了 。 在 Survey .view.Viewport 类 中 , 它 的 
布局 类 型 设置 为 card。 第 一 张 卡片 带 来 了 验证 屏幕 ， 它 同时 也 初始 化 了 Survey 应 用 程序 的 屏幕 ， 
如 代码 清单 14-11 所 示 。 在 代码 清单 14-12 中 ，aAuthentication 控 制 器 会 切换 到 第 二 个 能 入 在 视 
口中 的 卡片 ， 这 正 是 放置 调查 相关 视图 的 地 方 。 
图 14-6 显 示 组 列表 堆 秋 在 调查 列表 之 上 。 两 个 列表 都 占据 了 屏幕 的 左 侧 ( 西 侧 ) 区 域 。 较 大 
的 区 域 是 为 问题 预 留 的 。 把 它们 都 插入 到 Viewport 类 中 是 合理 的 ， 如 代码 清单 14-14 所 示 。 


代码 清单 14-14 ”更 新 Viewport 类 
















































































Ext .define('Survey .view.Viewport', { 
extend : 'Ext.container.Viewport', 
alias : 'widget.vp', 
requires : | 


'Survey .view.AuthorizationForm', 
'Survey .view.SurveyList' 


] ， 


lJayout : { 


type : 'card' 
}3 
items : [ 
{ 
xtype : 'authform' 
J 
{ 了 添加 调查 视图 
xtype : 'container', 
itemId : 'mainContainer', 
Fayout: :4 
align : 'stretch', 


type : 'hbox' 
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} 
] 
}); 


块 。 其 中 3 个 板块 用 来 给 问题 使 


用 7 了 7@。 





items 


{ 





Cal 


xtype : 'Container', 

minWidth : 200, 

flex co 

layout 
align : 
type 

二 

items 2 EE 


{ 


"Steeteoh. 
VOOR, 


xtype 
flex 3 
hidden : true 


xtype : 
fleéx. x 1 


xtype : 'questions', 
bodyPadding : 10， 
flex :3 


所 有 的 视图 都 谍 套 在 一 个 以 HBox 布 局 的 容器 之 下 @@. 容器 把 
用 全 ，! 个 版 块 给 左边 的 导航 条 使 用 @。 后 考 是 另外 一 种 盒子 类 型 
布局 的 容器 , 但 是 这 一 次 它 是 垂直 导向 的 。 有 两 个 部 分 被 组 列表 占据 全 ， 另 一 个 则 被 调查 列表 使 









































: 'grouplist', 


'surveylist', 


We 设置 左 栏 容器 


添加 GroupList 视图 
添加 Survey 列表 


了 添加 Question 视 图 

















屏幕 切 分 成 了 4 个 均等 的 垂直 板 





























为 用 户 在 继续 操作 之 前 要 先 选 择 一 项 调查 。 选 择 一 个 调查 会 自动 地 处 理 组 列表 的 visiple 必 性， 





重新 计算 高 度 以 匹配 需要 的 布局 模式 。 这 一 自动 化 过 程 是 由 控制 带 控 制 的 , 它 会 把 我 们 引 向 它们 





的 设置 。 
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正如 刚刚 所 看 到 的 ,视图 是 基本 的 、 简 单 的 。 这 是 它们 应 该 存在 的 方式 : 没有 数据 ,并 且 几 
乎 没有 交互 。 控 制 锅 则 操控 视图 上 所 有 的 动态 内 容 。 
你 在 定义 authentication 控制 器 类 的 时 候 使 用 了 控制 器 〈 代码 清单 14-4 )。 那 让 我 们 定义 
了 最 后 两 项 : Surveys 和 Questions 控 制 器 , 它们 各 自 管理 应 用 程序 相应 的 领域 。 让 我 们 来 看 看 





这 两 个 控制 锅 类 。 
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1. Surveys 控 制 器 

调查 需要 的 交互 量 很 少 , 但 是 它 集 拢 了 所 有 经 常会 被 使 用 的 控制 器 特性 。 正 如 本 章 先前 描述 
过 的 ， 控 制 器 在 很 大 程度 上 管理 着 依赖 。 它 尤其 需要 引用 surveys 和 Groups 相 关 的 所 有 视图 、 
模型 和 存储 。surveys 控 制 器 还 有 一 个 额外 的 任务 :等待 用 户 从 survey 列 表 视 图 中 选择 一 个 调 
查 ， 并 在 进一步 的 选择 中 展示 恰当 的 组 。 让 我 们 在 下 面 的 代码 清单 中 实现 它 。 


代码 清单 14-15 ”suzveys 控 制 器 


Ext .define('Survey.controller.Surveys', { 
extend : 'Ext.app.Controller', 





























models : [ RE 
'Survey', 
'Group' 
], i 
stores : |[ + 局 设置 依赖 
'Surveys', 
'Groups 
> 
views : [ | 
'GroupList', 
'SurveyList', 
'QuestionsForm' 





refs : [ 


ref "UEOUDLLStEY ;> 
selector : 'grouplist' 


] ， 


init : function () { 
this.control({ 
surveylist : { 
select : this.loadGroups 
} 
站 
7 


监听 以 选择 项 目 
loadGroups : function (grid, record) { 
Var groups = this.getGroupList(), 
groupRec, 
questions; 


groups.show(); 


访问 GroupList 引 用 


groups.reconfigure (record.groups ()); 


groupRec = groups.getStore() .getAt (0); A x 
if (groupRec) { A 选择 第 一 个 组 


groups.getSelectionModel() .select ([groupRec]); 
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} 


questions = groups.up('#mainContainer') .down('questions'); 
questions.setTitle(record.get ('name')); 
} 
} 


第 一 个 步 又 是 定义 依赖 @， 所 有 模型 、 存 储 和 视图 都 被 指定 了 。 这 很 合理 ， 因 为 这 个 控制 器 
要 与 调查 和 组 交互 。 另 外 ， 尽 管 我 们 谈论 过 ouestionsForm 视 图 ， 你 仍 计划 要 建立 一 个 专用 的 
Questions 控 制 器 , 这 是 因为 QuestionsForm 会 在 被 控制 器 继续 访问 的 过 程 中 动态 地 设置 标题 。 

在 14.2.2 节 中 ， 我 们 讨论 了 集中 设置 依赖 的 方式 ， 提 到 了 控制 器 、 模 型 、 视 图 和 存储 。 这 四 
种 类 型 是 不 同 的 ， 因 为 不 需要 指定 完全 的 类 名 称 。 打 个 比方 ， 你 很 容易 断定 Group 模 型 的 类 名 是 
Survey .model .Group。 因 此 ,只 需要 指定 名 称 的 最 后 一 部 分 ( 比如 ,如 果 类 名 是 Survey .model. 
package .Group ， 那么 就 是 Group 或 者 package .Group ) 

在 进一步 学 习 之 前 , 让 我 们 先 了 解 一 下 引用 。 引 用 用 定义 好 的 组 件 查询 选择 器 快速 地 访问 第 
一 个 被 实例 化 的 组 件 。 创 建 一 个 引用 以 在 需要 的 时 候 快 速 访问 GroupList。 引 用 会 自动 创建 一 个 
获取 方法 ， 它 是 一 个 便利 方法 ， 用 来 调用 引用 的 实例 。 这 个 引用 会 创建 一 个 getGroupList () 
方法 四,， 它 是 surveys Controller 实 例 上 的 成 员 。 

网 格 选 择 监听 器 高 效 地 调用 1oadCGroups 回 调 方法 ， 后 者 会 对 用 户 界面 做 一 些 更 改 。 首 先 ， 
它 会 使 用 配置 的 引用 获取 方法 全 使 GroupList 可 见 。 把 列表 设置 为 可 见 , 这 会 导致 左边 的 列 重新 
计算 布局 ，GroupList 和 surveyList 之 间 最 终 被 强制 为 2 : 1 的 高 度 比 例 。 

接 下 来 要 重新 配置 GroupList ， 也 就 是 说 用 新 定义 的 存储 来 代替 旧 的 。 新 的 存储 是 在 
record.groups () 方 法 被 调用 的 时 候 自 动 生成 的 ， 并 且 还 创建 了 hasMany 关 联 关系 。 新 的 存储 
(或 者 说 关联 关系 ) 就 要 被 访问 ， 以 决定 第 一 条 记录 ， 该 记录 也 会 被 自动 选择 人 @。 这 一 部 分 很 有 
趣 。 通 过 选择 列表 项 ， 你 还 会 触发 select 事 件 ， 后面 会 用 该 事件 来 加 载 问题 。 但 是 ， 你 预 留 了 
那 一 块 给 另 一 个 的 控制 器 了 ， 它 是 专门 给 问题 用 的 。 注 意 到 分 离 两 个 控制 器 的 细 线 了 吗 ? 

让 我 们 来 看 ouestions 控 制 锅 吧 ! 

2. Questions 控 制 器 

最 全 面 的 控制 器 负责 泻 染 问 题 , 并 在 用 户 输入 或 者 选择 的 时 候 保存 它们 的 值 。 说 起 来 容易 做 
起 来 难 ， 但 是 框架 在 这 里 其 实 做 了 很 多 工作 。 看 看 下 面 的 代码 清单 。 


代码 清单 14-16 ”ouestions 控 制 器 



























































































































































Ext .define('Survey.controller.Questions', { 
extend : 'Ext.app.Controller', 
views : [ 
'QuestionsForm' 
， a 
添加 控制 器 依赖 
refs : [ 


ref er 
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selector : 'gquestions' 
yn 
ref :FO 
selector : 'grouplist' 
} 
init : function (application) { 人 
this.control({ 建立 组 开关 意识 
grouplist : { 
select : this.showGroupQuestions 
a 
'#groupNext' : { 
click : this.showNextGroup 
Es 
'#surveyFinish' : { 
click : this.finishSurvey 
EE 监听 问题 字段 变化 
'questions field' : { 
change : this.saveItem 
3} 
的) 党 
showGroupQuestions : function (grid, record, index) { 
Var questions = record.questions(), 处 理 组 选择 
form = this.getForm(), 


store = grid.store, 
isLastGroup = (store.getCount() 
EEL 关 : 了 [] 


index) === 1， 


Guestions .each(function (gquestion) { 
var fielgd = Ext.apply(t{ 
fieldLabel : question.get ('gquestion'), 


基于 问题 数据 准 
value : question.get ('answer'), 备 表单 字段 
question : question, 
anchor OO 
xtype :a 

}, question.get ('config')); 

fields.push (field); 
}); 
form.removeAll (); 为 问题 字段 的 容 
form.ada ({ 器 添加 字段 集 

xtype : 'fieldset', 

title : record.get ('name'), 

items : fields, 

width : '100%' 
站 

添加 开关 按钮 便捷 组 

form.add({ 


Xtype 4 "button', 
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text : isLastGroup ? 'Save' : 'Next', 
itemId : isLastGroup ? 'surveyFinish' : 'groupNext', 
width : 200 
De 
上 


showNextGroup : function () { 
Var grid = this.getGroups(), 2 设置 开关 自动 化 


store = grid.getStore(), 

selModel = grid.getSelectionModel (), 
selected = selModel.getLastSelected(), 
curIndex = store.indexOof (selected), 
next = store.getAt (curIndex + 1); 


if (next) { 
selModel.select ([next]); 
} 
i 


finishSurvey : function () { 


var groups = this.getGroups(); 6 结束 调查 , 重 置 调查 视图 


this.getForm() .removeAll(); 
groups.getSelectionModel() .deselectAll(); 
groups.hide(); 


groups.up() .down('surveylist') .getSelectionModel() .deselectAl]l (); 


> 
9 保存 问题 值 
saveItem : function (field) { 


Var question = field.gquestion; 


if (!question) { 
field = field.up(' [question]'); 
question = field.question; 


} 


if (gquestion) { 
question.set('answer', field.getValue());} 


} 


De 


如 代码 清单 14-16 所 示 ，Questions 控 制 占 做 了 很 多 工作 。 它 从 一 个 视图 依赖 开始 @， 并 且 
你 在 Surveys 控 制 右 中 已 经 定义 了 这 个 视图 。 重复 定义 依赖 不 是 坏 习 惯 , 请 放心 ， 加载 圳 不 会 把 
它 加 载 两 次 的 。 重新 定义 依赖 关系 让 你 能 够 创建 可 重用 的 代码 , 同时 确保 其 他 开发 人 员 知 道 控制 




















带 在 处 理 哪些 类 。 


this.conttol 板 块 罗 列 了 4 个 监听 顺 。 它 通过 监听 GroupList 项 的 选择 事件 来 完成 和 
Surveys 控 制 器 的 交互 @。 Surveys 控 制 右 强制 选择 前 面 勾 选 的 调查 的 第 一 个 组 ,就 是 在 这 个 时 候 ， 





Questions 控 制 带 接管 并 处 理 组 的 选择 @@。 它 会 先 遍 历 选择 的 组 中 所 有 可 用 的 
































问题 ， 
Ext .form.Fields 的 一 个 数组 。 然 后 ， 它 删除 ouestionsForm 中 舟 套 的 组 件 。 如 果 可 以 的 话 ,， 给 
Ext .form.Fielgdset 留 点 空间 ， 它 是 装载 问题 的 容 右 @。 方便 的 一 点 是 ， 字 上段 集 的 名 称 和 选择 的 


然后 创建 
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组 的 名 字 一 样 。 在 此 时 ，ouestionsForm 的 标题 显示 为 调查 名 称 ， 字 段 集 相 对 应 地 显示 为 组 名 称 。 
这 对 于 让 用 户 知道 他 们 在 填充 什么 很 有 用 。 字 段 集 的 item 属 性 指向 步骤 中 聚集 的 一 组 问题 。 

















包 中 在 字段 集 下 添加 了 一 个 很 有 用 的 按钮 。 如 果 活 跃 的 调查 中 有 更 多 要 访问 的 组 , 按钮 会 切 


换 到 下 一 个 上 绅 。 和 否则 ， 它 就 会 把 状态 重新 恢复 到 仅 展示 调查 列表 








的 默认 视图 并 结束 调查 @。 








问题 是 数据 驱动 的 ， 这 意味 着 它们 是 从 服务 器 获取 的 。 大 多 数 情况 下 ,它们 和 表单 构建 器 应 
用 关联 。 你 希望 数据 被 不 断 保存 ， 而 不 需要 用 户 点 击 一 个 专门 的 按钮 ， 这 意味 着 监听 存在 于 所 有 
字段 上 的 一 个 通用 事件 :change 事 件 合 。 它 的 处 理 程序 简单 地 访问 选中 字段 的 getvalue 方 法 ， 
并 把 它 的 值 保 存 到 问题 的 模型 实例 上 @。 但 是 这 里 有 一 个 “疑难 杂 症 ”"。 复 杂 的 字段 ， 比 如 
































radiogroup 和 checkboxgroup， 对 这 一 事件 的 回应 不 同 。 它 们 内 





组 的 子 元 素 会 触发 变更 事件 ， 





而 组 容器 读 取 值 和 赋值 。 在 这 种 情况 ， 你 需要 进一步 看 看 如 何 构建 一 个 事件 触发 的 字段 并 获取 


getValue 方 法 。 














展示 了 一 次 调查 的 客户 端 视图 。 他 们 选择 了 一 个 调查 ， 本 次 调查 会 





瞧 ,， 这 个 应 用 程序 就 绪 , 我 们 可 以 对 其 进行 测试 了 。 准备 好 了 吗 ? 让 我 们 来 启动 它 。 图 14-10 





自动 地 选择 第 一 个 可 用 的 组 ， 


继而 在 页 面 的 中 间 部 分 加 载 应 用 的 适用 问题 。 他 们 的 改变 会 被 自动 保存 , 并 加 载 前 面 问题 的 答案 。 
你 可 以 通过 点 击 Next ( 下 一 步 ) 按钮 或 者 从 列表 中 选择 另 一 个 组 ， 无 颖 地 切换 到 另 一 个 组 。 


Sections Customer Experience 
eection Your information 
Your information 4 
Eperience 2 First name: 
Last name: 
Age: 
Gender: Male © 
Surveys 
Customer Experience Next 
Preference ranking 
Sections Customer Experience 
Section # 
Experience 
Your information 4 
How did you find 
EP 2 about us?: | 
Google 
Comments & 
suggestions: Ad 
Word of mouth 
Other 
Surveys 


: Sa 
Customer Experience 坚 


Preference ranking 





图 14-10 ”最 终 调查 应 用 的 演示 


Female 


恭喜 你 ， 目 标 应 用 程序 完成 了 ! 可 以 看 到 ， 它 是 一 个 进一步 开发 Ext JS 应 用 程序 的 很 棒 的 测 


试 平台 。 如 果 想 了 解 更 多 ， 这 里 罗列 了 一 些 提 升 调查 程序 的 理念 : 
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要 让 


口 在 服务 器 上 搭建 CRUD 的 工作 流 ; 

口 用 Ext JS 图 表 来 添加 报表 ; 

口 用 表单 构建 器 创建 调查 管理 接口 ; 

口 应 用 定制 化 的 样式 。 

因为 我 们 决定 要 把 这 个 作为 该 应 用 程序 的 稳定 版 本 ,所 以 要 把 它 打包 用 于 生产 。 为 此 ,你 需 
Sencha Cmd 的 构建 过 程 工 作 起 来 。 


























14.4 打包 


了 其 





打包 是 为 最 佳 交 付 准 备 一 个 Web 应 用 程序 的 一 道 工 序 。Sencha Cmd 使 打包 变 得 快捷 轻松 。 除 
也 一 些 不 错 的 功能 ，Sench Cmd 还 能 够 提供 如 下 帮助 : 

口 降低 包 的 大 小 ， 使 网 络 传输 更 快 ; 

口 提升 执行 速度 ; 

口 降低 内 存 占用 。 

它 通过 如 下 手段 来 达到 这 些 目 标 : 

口 去 除 不 必要 的 部 分 ， 比 如 类 、 组 件 ， 甚 至 方法 调用 ; 

口 级 联 JavaScript 和 CSS 代 码 ; 

口 削减 JavaScript 和 CSS 代 码 。 

Sencha Cmd 创 建 应 用 程序 的 初始 步骤 将 被 证 明 效果 明显 ， 因 为 现在 是 时 候 打 包 了 。 

大 多 数 情况 下 ， 应 用 程序 都 应 该 为 被 打包 做 好 准备 。 但 是 你 必须 引入 一 个 额外 的 文件 


















































data.json， 所 以 附加 的 配置 文件 是 有 必要 的 。 当 然 ， 你 应 该 迁移 到 RESTful ( 或 者 类 似 的 客户 端 - 


服务 


预 完 
性 告 
后 文 





需 端 ) 的 环境 中 ， 这 里 可 以 跳 过 这 一 步 。 
为 了 引入 构建 过 程 中 需要 的 文件 ， 你 必须 对 appjson 做 一 点 修改 。 这 一 JSON 对 象 已 经 有 一 点 
生成 的 内 容 了 ， 你 可 以 在 它 的 基础 上 附加 一 个 叫 作 resources 的 数组 属性 。resources 属 























诉 Sencha Cmd 从 相应 的 位 置 复制 应 用 程序 构建 版 本 的 文件 和 文件 来。 下面 是 添加 了 data.json 
件 的 样子 : 
{ 

"name": "Survey", 

"requires": [ 

| 号 

"resources": [ 


"data.json" 


] ， 


"id": "cl7ccff8-b8c9-4fb1-80f5-8f818603a5e5" 
} 


你 已 经 准备 就 绪 可 以 构建 应 用 程序 了 。 使 用 Sencha Cmd，Ext JS 应 用 程序 有 以 下 两 种 构建 
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口 测试 ”以 最 少 的 优化 级 联 JS 和 CSS 文 件 。 

口 生产 全面 优 化 并 压缩 的 JavaScript 和 CSS 文 件 。 

由 于 两 种 构建 类 型 的 构建 过 程 都 是 相同 的 ,我 们 直接 跳 到 生产 版 本 的 构建 上 。 打 开 终 端 ， 然 
后 导航 到 调查 应 用 程序 的 根 目录 下 。 现 在 执行 如 下 命令 : 














sencha app build production 


请 高 枕 无 优 地 看 着 程序 启动 ， 它 会 检查 JavaScript 代 码 的 错误 、 编 译 Sass 主 题 、 级 联 并 压缩 代 
码 ， 并 且 还 会 做 其 他 很 多 事情 来 优化 应 用 程序 ， 以 实现 最 佳 的 性 能 和 用 户 体验 。 
如 图 14-11 所 验证 的 ，Sencha Cmd 在 构建 目录 下 创建 了 一 个 新 的 目录 结构 ， 构 建 目录 包含 了 
调查 应 用 的 生产 版 本 。 让 我 们 看 看 构建 后 的 版 本 和 原始 开发 的 源 代码 有 什么 区 别 。 
v 国 build 
v ] production 
v DD Survey 
外 app.js 
data.json 
® index.html 
人 
加 Readme.md 
男 re pe 
了 [9 theme 


图 14-11 构建 完成 的 应 用 程序 文件 


从 运行 速度 上 来 说 ， 大 体 的 检测 结果 如 下 。 
口 未 构建 (开发 ) 版 本 的 执行 时 间 : 1764.207 ms。 
口 完全 构建 (生产 ) 版 本 的 执行 时 间 : 472.525 ms。 
令 人 印象 深刻 的 是 生产 版 本 的 速度 超过 开发 版 本 两 倍 。 实 际 上 是 快 3.7 倍 ， 假 如 你 是 在 网 络 
状况 较 差 的 情况 下 从 远程 地 址 下 载 应 用 ， 这 个 数字 还 会 更 大 。 总 大 小 怎么 样 呢 ? 
在 Chrome Inspector ( 或 者 其 他 任何 网 络 元 素 审 查 工 具 ) 上 使 用 Network ( 网 络 ) 选项 卡 ， 你 
可 以 看 到 两 个 版 本 的 不 同 之 处 ， 如 下 所 述 。 
口 未 构建 (开发 ) 版 本 的 传输 : 3.8 M 每 274 次 请 求 。 
口 完全 构建 (生产 ) 版 本 的 传输 : 1.2 M 每 4 次 请 求 。 
生产 类 型 的 构建 毫 无 争议 是 为 终端 用 户 提供 服务 的 更 好 方式 。 它 执行 速度 更 快 , 并 且 下 载 速度 更 
快 ， 使 用 更 少 的 昂贵 请 求 。 
在 一 个 常规 的 应 用 开发 周期 中 , 这 是 质量 验收 测试 之 后 的 最 后 一 个 测试 了 。 这 是 庆贺 的 最 佳 
时 间 ! 享受 本 地 和 远程 的 测试 , 并 体验 Sencha Cmd 构 建 过 程 给 你 从 头 开 始 构建 应 用 程序 所 带 来 的 


区 到 
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14.5 小结 


在 这 紧凑 的 一 章 中 , 你 探索 了 构建 应 用 程序 的 主要 步骤 。 不管 是 小 型 还 是 大 型 应 用 ,开发 流 
程 都 是 一 样 的 。11-SAW 流 程 对 于 规划 开发 步骤 非常 有 用 。 请 时 刻 谨 记 代码 约定 对 于 产品 生命 周 
期 的 重要 性 。 请 使 用 本 章 描述 的 Ext JS 规范 ， 并 用 于 开发 JavaScript 和 CSS 代 码 。 

我 们 通过 本 书 讲解 了 大 量 内 容 。 你 了 解 了 框架 的 内 部 机 制 、 部 件 、 类 系统 、MVC 模 式 、Sencha 
Cmd 构 建 过 程 等 。 该 框架 将 继续 存在 ， 并 且 Sencha 会 继续 开发 新 的 激动 人 心 的 功能 来 丰富 它 。 或 
许 ， 我 们 最 希望 你 掌握 钻研 Ext JS 源 代码 的 能 力 ， 以 便 能 够 持续 解决 无 穷尽 的 问题 。 























